Anzeigen nur der gewünschten div basierend auf Menüauswahl

Question

Ich bin ziemlich neu in der Programmierung in HTML, und ich möchte eine Webseite erstellen, die zeigt, was ich innerhalb eines Tags basierend auf Menüauswahl habe.

in meta Ich habe so etwas wie dies:

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

Weiter unten in dem Code habe ich so etwas wie:

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

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

Gibt es eine Möglichkeit, die Seite bekommen kann nur um den Inhalt anzuzeigen Wenn ich den Menü-Link zu Kapitel 4 drücke und nur den Inhalt von Kapitel 5, wenn ich den Menü-Link für Kapitel 5 drücke?

Jede Hilfe wird sehr geschätzt!

Answer 1

Sie könnten verwenden: target Ändern von Klassen mit IDs.

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

Referenz: :target

Answer 2

Sie geben id dieses speziellen div verwenden sollten. Wenn Sie möchten in der einzigen Web-Seite mit Anker-Tag navigieren Sie ID verwenden sollten und Sie können id einem Tag wie Spanne, div, Tisch

Ihr neuer Code wird so sein geben.

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

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