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

我尝试了一切，当你点击“一切”锚标签时，这项工作，但我想这样做如果你点击“一切”它显示全文，但如果你点击“水果”它只显示文本关于水果和隐藏蔬菜的文字，我怎样才能让它工作？

标签： htmlcssanchor

Answer 1

你:target的 s 是 的孩子.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>