如何清除 :target 选择？

Question

我有 link 使用 :target 选择器。单击时，对应的段落会突出显示。问题是：一旦点击，就无法清除选择。 我希望再次点击选中的项目时取消选中。

例如：如果 link 1 被选中，我再次点击它，它就会变成未选中状态。

body {
  background: #fefefe;  
}

:target {
   background-color: #ccff66;
}

<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>

<p id="link1">This is a text A</p>
<p id="link2">This is a text B</p>
<p id="link3">This is a text C</p>
<p id="link4">This is a text D</p>

备注

我在 radio/checkboxes 的解决方法中取得了成功，但我想知道是否可以使用 :target.[=42= 实现此行为]

它不是重复项：很明显 post 这里的目标是取消选中一个项目第二次点击它，而不是点击第三个 "eraser" 项目（在当前场景中甚至不存在）。

Answer 1

所以，这会做你想做的事，但我不确定从语义的角度来看这是最明智的做法。 :target 选择器用于设置 id 与 URL 中的 hash/fragment 相匹配的元素的样式。如果您单击其散列与该片段匹配的 link，下面的代码将删除该散列。但是，这与 <a href="#hash">a</a> 与 "supposed" 的做法背道而驰，即将您带到 ID 为 "hash" 的元素所在的位置。所以，慎用。

var anchors = document.getElementsByTagName('a');
for (var i = 0, z = anchors.length; i < z; i++) {
  var anchor = anchors[i];
  anchor.onclick = function (e) {
    if (e.target.hash === location.hash) {
      location.hash = '';
      e.preventDefault();
    }
  };
}

body {
  background: #fefefe;  
}

:target {
   background-color: #ccff66;
}

<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
<a href="#link4">Link 4</a>

<p id="link1">This is a text A</p>
<p id="link2">This is a text B</p>
<p id="link3">This is a text C</p>
<p id="link4">This is a text D</p>

Answer 2

你不能用一个 link 来真正打开和关闭目标，但是（作为一个纯粹的 CSS 解决方法）你可以同时使用 show 和 hide link 并且总是只显示其中一个：

.hide, .show, .list {
    padding: 10px;
    display:block;
    border: 1px solid #000;
}

.list,
.show,
.hide:target {
     display: none;
}

.hide:target + .show,
.hide:target ~ .list {
    display:block;
}

  <div>
    <a href="#hide" class="hide" id="hide">Show menu</a>
    <a href="#show" class="show" id="show">Hide menu</a>
    <div  id="drop" class="list">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
    </div>
</div>

如何清除 :target 选择？

How to clear a :target choice?

html

javascript

css

css-selectors

target

备注