2016-07-04 17 views
3

Ich habe eine Optionsschaltfläche mit der ID someID-1 und einem div mit der ID navi1.Anzeige div, wenn das Optionsfeld aktiviert ist

<input name="nappi" type="radio" id="someID-1" /> 

<div>&nbsp; 
    <div id="navi1"> 
    <div style="z-index:100;position:fixed;right:0;top:0;bottom:0;"> 
     <label for="someID-2">2</label> 
    </div> 
    </div> 
</div> 

Dieser CSS-Code funktioniert gut:

div[id^="navi"] { 
    display: none; 
} 

Aber das OK nicht funktioniert:

input#someID-1:checked #navi1 { 
    display: block; 
} 

Wie soll ich den Code ändern?

Ich habe Dutzende von Radio-Tasten (ID-Namen zwischen someID-1 und someID-99). Ich hätte gerne dynamischen Code.

Ich möchte kein JavaScript verwenden.

+0

Haben Sie Einschränkungen bei der Verwendung von JavaScript? –

+0

Ich bevorzuge nur HTML und CSS. – xms

Antwort

1

Sie können so machen. können Sie die Details des Wählers gelesen, dass ich here verwendet

#navi1{ 
 
    display: none; 
 
} 
 
input[type="radio"]#someID-1:checked + div #navi1{ 
 
display: block; 
 
} 
 
.box{ 
 
    border: 1px solid #ddd; 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
}
<input name="nappi" type="radio" id="someID-1" /> 
 

 
<div class="box">&nbsp; 
 
    <div id="navi1"> 
 
    <div> 
 
     <label for="someID-2">2</label> 
 
    </div> 
 
    </div> 
 
</div>

0

Sie müssen die Dokumenthierarchie korrekt in Ihrem CSS navigieren. So funktioniert das:

div[id^="navi"] 
{ 
    display: none; 
} 

#someID-1:checked + div div { 
    display:block; 
} 
Verwandte Themen