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>

参考：:target

Answer 2

您应该使用该特定div的给定ID。当您想使用锚标记在单个网页中导航时你应该使用id 并且您可以为任何标签提供id，例如span，div，table

您的新代码将是这样的。

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

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

根据菜单选项仅显示所需的div

2 个答案: