HTMLのラジオボタンが特殊な分割で機能しないのはなぜですか？

私は表示/非表示の2つのラジオボタンを持っていますdiv私のウェブサイトです。最初のラジオボタンはdivの可視性を制御します。このdivには別のラジオボタンがあり、別のdivを表示/非表示しています。最初のラジオボタンは機能しますが、2番目のラジオボタンをクリックすると何も起こりません。HTMLのラジオボタンが特殊な分割で機能しないのはなぜですか？

これは私のHTMLとCSSのコードの例を次に示します。

HTML：

<body> 


    <label for="a">B</label><input type="radio" id="a" name="a" value="1"> 

    <div id="B"> 

     <p>Div B</p> 
     <label for="c">D</label><input type="radio" id="c" name="c" value="1"> 

    </div> 

    <div id="D"> 

     <p>Div D</p> 

    </div> 

</body>

はCSS：

#B 
{ 
    float:left; 
    background-color: green; 
    width: 150px; 
    height: 50px; 

    display: none; 
} 

#D 
{ 
    float:right; 
    background-color: red; 
    width: 150px; 
    height: 50px; 

    display: none; 
} 

#a:checked ~ #B 
{ 
    display: block; 
} 

#c:checked ~ #D 
{ 
    display: block; 
}

番目のボタンは、何もしない理由を私は理解していません。 JSを使用しないで解決策はありますか？ @showdevが#cが#Dので、兄弟セレクタの兄弟が、その場合には機能しないだろうではありません、言ったように

は、

出典

2016-03-28 wammder

をあなたは使用しています[」あなたのCSSには「兄弟セレクタ」（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors）がありますが、 '＃c'は'＃D'の兄弟ではありません。 – showdev

このリンクをありがとう、今私はそれが動作しない理由を理解する！ – wammder

、ありがとうございました。

CSSのみで動作させたい場合は、構造を変更するか、javascriptでこれを行う必要があります。

EDIT：私はそれが唯一のCSSとHTMLの配置と連携作られた：

See this fiddle

HTML：変更

<body> 
    <label for="a">B</label><input type="radio" id="a" name="a" value="1"> 
    <div id="B"> 
     <p>Div B</p> 
    </div> 
    <label for="c">D</label><input type="radio" id="c" name="c" value="1"> 
    <div id="D"> 
     <p>Div D</p> 
    </div> 
</body>

CSS：

#a:checked ~ #B 
{ 
    display: block; 
} 
#c:checked ~ #D 
{ 
    display: block; 
} 
label:nth-of-type(2), input:nth-of-type(2) { display: none; clear: both;} 

#a:checked ~ label:nth-of-type(2), #a:checked ~ input:nth-of-type(2) { 
    display: block; 
}

出典

2016-03-28 17:38:22

ありがとうございます。私はJSを使用するか、私の構造を変更できるかどうかを見極めるつもりです。 – wammder

あなたはすべてのJSが含まれていない制限されたソリューションを必要としない限り、あなたは、ジャバスクリプトを使用する必要があります..あなたは簡単にこのように、onClickの機能を使用して問題を解決することができます：

<input type="radio" id="a" name="a" value="1" onclick="somefunctionA()"> 
<label for="c">D</label><input type="radio" id="c" name="c" value="1" onclick="somefunctionB()"> 
<script> 
    function somefunctionA(){ 
     //do something! 
    } 

    function somefunctionB(){ 
     //do something! 
    } 
</script>

出典

2016-03-28 17:45:38

あなたの答えもありがとう。 – wammder

HTMLのラジオボタンが特殊な分割で機能しないのはなぜですか？

答えて

関連する問題