如何清除 :target 选择？

Question

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

例如：如果链接 1 被选中并且我再次点击它，那么它就会被取消选中。

jsfiddle

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>

注意事项

• 我在使用单选/复选框的变通方法中取得了成功，但我想知道是否可以使用 :target 实现此行为。

• 它不是重复的：在帖子中非常清楚，这里的目标是取消选中第二次点击的项目，而不是点击第三个“橡皮擦”项目（在当前场景中甚至不存在）。

Answer 1

您不能真正使用单个链接打开和关闭目标，但是（作为纯 CSS 解决方法）您可以同时使用 show 和 hide 链接并始终只显示其中一个：

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

Answer 2

所以，这会做你想做的事，但我不确定从语义的角度来看这是最明智的做法。 :target 选择器用于设置其 id 与 URL 中的哈希/片段匹配的元素的样式。如果您单击哈希与该片段匹配的链接，则下面的代码将删除该哈希。但是，这与<a href="#hash">a</a>“应该”做的事情背道而驰，即带您到 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>