Verbergen div und zeigen Sie es, wenn das Ziel

Question

ich dies habe in meinem html:

<div> 
    <ul id="tabs"> 
    <li id="h1"> 
     <a href="#h1">Home</a> 
     <div> 
     text here 
     </div> 
    </li> 
    <li id="h2"> 
     <a href="#h2">Services</a> 
     <div> 
     text here 
     </div> 
    </li> 
    </ul> 
</div> 

Was ich will ist zu tun, um die Listenelemente Inline zu machen, während ihre Inhalte zu verstecken. Und der Inhalt wäre nur sichtbar, wenn ich auf den Listenlink klicke. Dies ist, was ich bisher auf der CSS versucht habe:

li { 
    display: inline; 
} 

li div { 
    display: none; 
} 

li:target { 
    display: block; 
} 

Allerdings funktioniert dies nicht. Die Anzeige: Block; überschreibt nicht die Anzeige: keine;

Vielen Dank im Voraus!

Answer 1

li:target bezieht sich nur auf das Element li selbst, auf das abgezielt wird. Das Setzen der display-Eigenschaft von li auf block hat keine Auswirkungen auf die div-Eigenschaft, deren display-Eigenschaft auf none festgelegt ist. In der Tat wird nur die display: inline überschrieben, die auf li definiert ist.

Wenn Sie das div anzeigen möchten, das sich innerhalb des Zielelements li befindet, müssen Sie den Selektor so anpassen, dass er tatsächlich mit diesem div übereinstimmt. Zum Beispiel li:target div mit der Spezifität des ursprünglichen Regel übereinstimmen:

li { 
 
    display: inline; 
 
} 
 

 
li div { 
 
    display: none; 
 
} 
 

 
li:target div { 
 
    display: block; 
 
}

<div> 
 
    <ul id="tabs"> 
 
    <li id="h1"> 
 
     <a href="#h1">Home</a> 
 
     <div> 
 
     text here 
 
     </div> 
 
    </li> 
 
    <li id="h2"> 
 
     <a href="#h2">Services</a> 
 
     <div> 
 
     text here 2 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>