Wyświetlanie tylko pożądanego elementu div w oparciu o wybór z menu

Question

Jestem dość nowy w programowaniu w HTML i chcę utworzyć stronę internetową, która wyświetla to, co mam w znaczniku na podstawie wyboru menu.

w meta mam coś takiego:

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

Dalej kodu, mam coś takiego:

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

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

Czy jest jakiś sposób mogę dostać stronę, aby wyświetlić tylko zawartość Kiedy naciśniesz link menu do rozdziału 4, a tylko treść rozdziału 5, gdy naciśniesz łącze menu do rozdziału 5?

Każda pomoc będzie wysoko ceniona!

Answer 1

Możesz użyć : target zmieniając klasy z 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>

referencyjny: :target

Answer 2

Należy użyć podać identyfikator danego div. Jeśli chcesz poruszać się po jednej stronie internetowej przy użyciu znacznika zakotwiczenia należy użyć identyfikatora można podać identyfikator do każdego tagu jak przęsła, div, stół

nowy kod będzie tak.

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

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