修改：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

Notice to Readers

本回答关注原始帖子初稿

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

---

:target

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

---

Requirements

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中，添加两个规则集： 第一个是默认的目标标签（OFF）： #S { width: 44vw; height: 44vw; border: 4px solid #444 } 第二个是激活的目标标签（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>