Display only the desired div based on menu selection

Question

I'm new to HTML programming and I want to create a web page that displays what I have in a menu selection tag.

in meta, I have something like this:

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

Further along the code, I have something like:

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

Is there a way to make the page display only the content when I click the menu link for chapter 4 and only the contents of chapter 5 when I click the menu link for chapter 5?

Any help would be greatly appreciated!

Answer 1

You can use : target changing classes with identifiers.

 #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> 

Link :: target

Answer 2

You must use the id id of this particular div. If you want to navigate one web page using the anchor tag, you must use an identifier and you can give an id to any tag, for example span, div, table

Your new code will be like this.

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