HTML锚定标记&；：目标

我有一个水平滚动条，里面有一些锚定标签。这些锚定标记的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>

---

我尝试了一切，这项工作就在你点击“everything”锚定标签时进行，但我想这样做，如果你点击“everything”，它会显示全文，但如果你点击“Frients”，它只显示关于水果的文本，并隐藏蔬菜的文本，如何使其工作？

您的

：目标
是
.text
的子对象。相应地更新你的css

例如：


/*隐藏所有.text子div：*/
.text div{display:none；}
/*如果.text是目标，则显示所有.text子div：*/
.text:target div{display:block；}
/*显示特定的target.text子div*/
.text div:target{display:block；}

…水果。。。
…蔬菜。。。
您的
：目标
是
.text
的子项。相应地更新你的css

例如：


/*隐藏所有.text子div：*/
.text div{display:none；}
/*如果.text是目标，则显示所有.text子div：*/
.text:target div{display:block；}
/*显示特定的target.text子div*/
.text div:target{display:block；}

…水果。。。
…蔬菜。。。

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