HTML 锚标记 &：target

Question

我有一个水平滚动条，里面有一些锚标签。这些锚标签的 href 是一些div 标签的 ID：

/*horizontal bar*/
<div>
<a href="#everything">Everything</a>
<a href="#fruits">Fruits</a>
<a href="#vegetables">Vegetables</a>
</div>
/*text*/
<div class="text" id="everything">
<div id="fruits">
...
</div>
<div  id="vegetables">
...
</div>
</div>

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

.text {
display: none;}
.text:target {
display: block;}

我尝试了一切，这项工作只是当你点击"一切">

锚标签时，但我想这样做如果你点击"一切"它会显示全文，但如果你点击"水果"，它只显示关于水果的文本并隐藏蔬菜的文本，我怎样才能让它工作？

Answer 1

你的:target是.text的孩子。相应地更新您的 css。

例如：

/* hide all .text child divs: */
.text div {display: none;}
/* show all .text child divs if .text is the target: */
.text:target div {display: block;}
/* show the specific target .text child div */
.text div:target {display: block;}

<div>
<a href="#everything">Everything</a>
<a href="#fruits">Fruits</a>
<a href="#vegetables">Vegetables</a>
</div>
<div class="text" id="everything">
<div id="fruits">
...fruits...
</div>
<div  id="vegetables">
...veg...
</div>
</div>