在javascript中修改：target

Question

我在CSS中有这个

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

在“父”页面（第1页）上，我有一个按钮可以转到另一个页面：“ page2.html＃box”。因此，在页面加载时将应用#box:target。  但是使用page1上的按钮，我激活了一个功能，该功能旨在更改#box:target属性。我正在寻找一种方法来更改javascript。不是:focus。

Answer 1

  

给读者的通知

     

此答案涉及原始帖子初稿

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

---

:target

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

---

要求

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

       <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> 
   

        

   开启：必须为关闭：必须为☝
     目标的#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>