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

我什么都试过了，只有当你点击 "everything" 锚标签时才有效，但我想这样做如果你点击 "everything" 它会显示全文，但如果你点击在 "fruits" 它只显示有关水果的文字并隐藏蔬菜的文字，我怎样才能让它工作？

Answer 1

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

EG:

/* 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 锚标记和 :target

HTML anchor tag & :target

html

css

anchor