Question

我在html中使用：target，我编写了类似的代码：

<div class="1">
    <div>
       <ul>
          <a href="#2">link to part 2</a>
       </ul>
    </div>

    <div class="ex">
        <ul id="2">
           <p>hi</p>
        </ul> 
    </div>

我已经在CSS中完成了此操作：

.ex ul {
    display: none;
 }
 .ex ul:target {
    display: block;
 }

我需要做的是，当您单击链接（在本例中为“链接至第2部分”）时，＃2 ul节目（已完成此操作）和ul链接消失了，我该怎么办？干嘛？

Answer 1

使用JavaScript可以实现这一目标。我将id 点击删除添加到了您要删除的链接中，然后创建了一个JavaScript 事件监听器，以在单击该项目时更改其样式。 You can see the code working here。

<div class="1">
  <ul>
    <a href="#2" id="remove-on-click">link to part 2</a>
  </ul>
</div>

<div class="ex">
  <ul id="2">
    <p>hi</p>
  </ul> 
</div>

<script>
  document.getElementById('remove-on-click').addEventListener('click',function(){
    this.style.display = "none";
  })
</script>

我没有编辑您的其他任何代码，但请记住， ul 标签应与 li 后代一起使用。如果您没有 li 子孙，请使用其他标签，例如 div 。另外，您可能希望熟悉类和id属性的正确命名，尤其是在不以数字开头的情况下。

https://www.w3.org/TR/CSS2/syndata.html#characters

What are valid values for the id attribute in HTML?

Answer 2

要注意的主要注意事项是您必须以相反的顺序写标记。

这是因为CSS选择器只能选择：

元素本身（或伪元素）
元素的后代元素
元素的后续同胞

它无法选择祖先元素或（在这种情况下）先前的兄弟姐妹。

以相反的顺序编写标记后，就可以使用CSS达到想要的效果。

工作示例：

#part2,
#part3 {
  display: none;
}

#part2:target,
#part3:target {
  display: block;
}

#part2:target ~ [id^="part"],
#part3:target ~ [id^="part"] {
  display: none;
}

<div id="part3">
<p>This is Part 3.</p>
</div>

<div  id="part2">
<p>This is Part 2.</p>
<ul>
<li><a href="#part3">Link to Part 3</a></li>
</ul> 
</div>

<div id="part1">
<p>This is Part 1.</p>
<ul>
<li><a href="#part2">Link to Part 2</a></li>
</ul>
</div>

使用：target，html5更改其他元素的样式

2 个答案: