Question

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

例如：如果选择了链接1并再次单击它，则它将被取消选择。

＆＃13;

body {
  background: #fefefe;  
}

:target {
   background-color: #ccff66;
}

＆＃13;

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

＆＃13;

注释

我在收音机/复选框方面取得了成功，但我想知道是否可以使用:target来实现此行为。
它不是重复的：在帖子上非常清楚这里的目标是通过第二次点击取消选中一个项目，而不是点击第3个＆＃34;橡皮擦＆＃34; item（在当前场景中甚至不存在）。

Answer 1

所以，这会做你想要的，但我不确定从语义的角度来看，这是最明智的做法。 :target选择器用于设置id与URL中的哈希/片段匹配的元素的样式。如果单击其哈希与该片段匹配的链接，则下面的代码将删除该哈希。但是，它反对<a href="#hash">a</a>所假设的＃34;要做的，就是带你到id为＆＃34; hash＆＃34;的元素的位置。所以，请谨慎使用。

＆＃13;

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();
    }
  };
}

＆＃13;

body {
  background: #fefefe;  
}

:target {
   background-color: #ccff66;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何清除：目标选择？

注释

2 个答案: