3

CSSのみからタブを作成するためにラジオボタンを使用しています。私が直面している問題は<label>、ラジオ ボタンを参照する を選択する方法がわからないことです。ラベルをコンテンツから分離して、タブとしてレイアウトできるようにします。

<div class="tab-labels">
   <label for="tab-1">Tab 1</label>
   <label for="tab-2">Tab 2</label>
   <label for="tab-3">Tab 3</label>
</div>

コンテンツ ペインは以下に配置されています。入力ボタンは content div 内に保持されているため、ラベルをクリックしたときに選択できます。しかし、私は逆に行くことはできません：

<div class="content-container">
    <div class="tab details">
        <input id="tab-1" type="radio" name="radio-set" class="tab-selector" checked="checked"/>
        <div class="content">
            <p>Some content 1</p>                   
        </div>
    </div>
    <div class="tab details">
        <input id="tab-2" type="radio" name="radio-set" class="tab-selector"/>
        <div class="content">
            <p>Some content 2</p>                   
        </div>
    </div>
    <div class="tab details">
        <input id="tab-3" type="radio" name="radio-set" class="tab-selector"/>
        <div class="content">
            <p>Some content 3</p>                    
        </div>
    </div>
</div>

私が達成しようとしていることと、この問題に対する私の質問は次のとおりです:このレイアウトでラジオ入力がクリックされたときにラベルの背景色を変更するにはどうすればよいですか?

このライブでプレイしたい場合は、フィドルを提供しました: http://jsfiddle.net/mjohnsonco/6KeTR/

4

2 に答える 2

1

これは CSS のみで実現できますが、再構築された HTML とより醜い CSS を使用する必要があります。

この例を見てください: http://jsfiddle.net/kizu/6KeTR/16/

ここでは、コンテナからすべての入力を、影響を与えたいブロックの直前の場所に移動する必要があります。その場合、~コンビネーターを使用してタブの親とそのコンテンツをターゲットにできるように配置し、次のようないくつかの nth-child セレクターを使用します。

#tab-1:checked ~ .content-container > .tab:first-child  > .content,
#tab-2:checked ~ .content-container > .tab:nth-child(2) > .content,
#tab-3:checked ~ .content-container > .tab:nth-child(3) > .content {}

ただし、そのような CSS のみのものは概念実証のようなものです — それらは JS の対応物ほど保守可能でも使用可能でもありません。だから私は楽しみのためにのみそれらを使用することをお勧めします:)

于 2012-12-21T23:03:18.727 に答える
0

CSS

.bgcolor1{

background-color:#blue;

}
.bgcolor2{

background-color:green;

}
.bgcolor3{

background-color:red;

}

Jクエリ

$('input[name=radio-set1]:checked', '#main').addClass(bgcolor1)

$('input[name=radio-set2]:checked', '#main').addClass(bgcolor2)

$('input[name=radio-set5]:checked', '#main').addClass(bgcolor3)

HTML

 <input id="tab-1" type="radio" name="radio-set1" class="tab-selector" checked="checked"/>
 <input id="tab-2" type="radio" name="radio-set2" class="tab-selector" checked="checked"/>
 <input id="tab-3" type="radio" name="radio-set3" class="tab-selector" checked="checked"/>

<label class="bgcolor1" for="tab-1">Tab 1</label>
<label class="bgcolor2" for="tab-2">Tab 2</label>
<label class="bgcolor3" for="tab-3">Tab 3</label>
于 2012-12-21T18:46:25.633 に答える