根据菜单选项仅显示所需的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章的菜单链接时的内容,而当我按下第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>

参考：：目标