html - 根据菜单选择仅显示想要的 div

Question

我对 HTML 编程还很陌生，我想创建一个网页，根据菜单选择显示标签中的内容。

在 meta 中我有这样的东西:

<ul class="dropdown-menu" role="menu">
    <li><a href="#chap4">Chapter 4</a></li>
    <li><a href="#chap5">Chapter 5</a></li>
</ul>

在代码的下方，我有类似的东西:

<div class="chap4">
    content
</div>

<div class="chap5">
    content
</div>

有什么方法可以让页面在我按下第 4 章的菜单链接时只显示第 4 章的内容，而当我按下第 5 章的菜单链接时只显示第 5 章的内容？

任何帮助将不胜感激!

Answer 1

您可以使用 :target 更改带有 id 的类。

#content > div:not(:target) {
  display: none;
}

<ul class="dropdown-menu" role="menu">
  <li><a href="#chap4">Chapter 4</a>
  </li>
  <li><a href="#chap5">Chapter 5</a>
  </li>
</ul>

<div id="content">
  <div id="chap4">
    content 4
  </div>

  <div id="chap5">
    content 5
  </div>
</div>

引用::target