如何清除:目标选择

How to clear a :target choice?

本文关键字：目标 选择 清除 何清除      更新时间：2023-09-26

我有使用: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>

备注

  • 我在使用radio/checkbox的变通方法中取得了成功，但我想知道是否可以使用:target实现这种行为

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

你不能用一个链接来切换目标，但（作为一个纯粹的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>

所以，这会做你想做的事，但从语义的角度来看，我不确定这是最明智的做法。: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>

相关文章：