根据菜单选项只显示想要的div

Question

对于使用HTML进行编程来说，我相当新，并且我想创建一个网页，根据菜单选项显示标记中的内容。

在元

我有这样的事情：

<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 ，你可以像跨度，DIV，表中的任何标签

你的代码会是这样给ID在单一网页浏览。

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

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