在 javascript 中修改 :target

Question

我在 CSS 中有这个：

#box:target {
    box-shadow: 0px 0px 20px black;
}

在“父”页面（page1）上，我有一个按钮可以让您转到另一个页面：“page2.html#box”。所以当我加载页面时应用#box:target。 但是使用 page1 上的按钮，我激活了一个功能，其目的是更改 #box:target 属性。我正在寻找一种在javascript中改变它的方法。不是:focus。

Answer 1

读者须知

此答案涉及原始帖子初稿

OP 已被编辑为一个完全不同的问题。因此，如果此答案令人困惑，您需要查看编辑。若带来不便请谅解。

---

:target

简单的样式切换不需要 JavaScript。看来您误解了实现:target 伪类所需的要求。

---

要求

1. 两个<a>nchor 标签和一个任意类型的标签作为目标。

       <a>ON</a>  <a>OFF</a>  <section>SECTION</section> 
   

   一个<a> 将“打开”新的<section> 样式，另一个<a> 将“关闭”。

2. 接下来，<section> 需要一个#id。 <a> 都需要 href 属性。每个href 的值彼此不同并且是特定的（请参阅此示例下方的注释）：

         <a href="">ON</a>     <a href="">OFF</a>  <section id="S">SECTION</section> 
   

   ON：必须是    ☝        OFF：必须是☝
   目标的#id：#S    “非跳跃”值#/

3. 在 CSS 中，添加两个规则集：

   1. 第一个是默认的目标标签（OFF）：

      #S { width: 44vw; height: 44vw; border: 4px solid #444 }
      

   2. 第二个是激活的目标标签 (ON)。为:target 伪类添加后缀：

      #S:target { text-shadow: 4px 4px 4px 4px #444; }
      

4. HTML 布局或多或少应该是这样的：

      <a href="#S">ON</a>  <a href="#/">OFF</a>  <section id="S">SECTION</section>
   

---

演示

html,
body {
  font: 900 10vh/1 Consolas;
}

a {
  color: blue;
}

a:hover,
a:active {
  color: cyan;
}

#B {
  box-shadow: 12px 5px 8px 10px inset rgba(0, 0, 0, 0.4);
  border: 6px inset rgba(0, 0, 0, 0.8);
  width: 40vw;
  height: 40vh;
  font-size: 20vh;
  text-shadow: 4px 7px 2px rgba(0, 0, 0, 0.6);
}

#B:target {
  box-shadow: 12px -5px 4px 4px rgba(0, 0, 0, 0.4);
  text-shadow: 4px -3px 0px #fff, 9px -8px 0px rgba(0, 0, 0, 0.55);
}

<a href="#B" class='on'>ON_</a><a href="#/" class='off'>OFF</a>

<figure id='B' class='box'>
  <figcaption>BOX</figcaption>
</figure>