<分区>
<分区>
我有一个水平滚动条，里面有一些 anchor 标签。这些 anchor 标签的 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;}
我什么都试过了，只要你点击“一切” anchor 标签就可以工作，但我想这样做如果你点击“一切”它会显示全文，但如果你点击“水果”它会显示只有关于水果的文字并隐藏蔬菜的文字，我怎样才能让它工作？
最佳答案
您的 :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>关于HTML anchor 标记 & :target，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59633879/
相关文章：
html - 如何将文本的基线垂直对齐到 HTML/CSS 中的设定点？
css - Internet Explorer 当前状态测试
html - 如何在 HTML 中制作一个边框带有标题的框？
javascript - 事件监听器不在 anchor 上工作
css - 检查 child 是否是最后一个 - 还包括文本节点
javascript - 你为什么想要一个不是链接的 anchor 标签？ (没有 href 属性？)
javascript - 如何在 Angular 2+ 中更改 anchor 的 html 元素后设置 @ViewChild ('anchor_name' )？