0

ブートストラップを使用して div を切り替えようとしています (data-toggle="buttons-checkbox") 私のコードを参照してください:

<div class="btn-group d1" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-link ra">A</button>
    <button type="button" class="btn btn-link rb">B</button>
    <button type="button" class="btn btn-link rc">C</button>
</div>

<div class="myDiv rad">AAAAAAAAAAAA<br />AAAAAAAAAAAA</div>
<div class="myDiv rbd">BBBBBBBBBBBB<br />BBBBBBBBBBBB</div>
<div class="myDiv rcd">CCCCCCCCCCCC<br />CCCCCCCCCCCC</div>

$(".ra").on("click",function(){
    $('.myDiv').toggle();
    $(".rad").toggle();
});

$(".rb").on("click",function(){
    $('.myDiv').toggle();
    $(".rbd").toggle();
});

$(".rc").on("click",function(){
    $('.myDiv').toggle();
    $(".rcd").toggle();
});

作業リンクjsfiddleを参照してください

選択に基づいて表示する方法はありますか？同時に2つのdivのように？

4

1 に答える 1

0

ボタンを反復処理し、「アクティブ」な要素のみを見つけて、「アクティブな」要素に対応する要素を表示し、他の要素は非表示にします。「アクティブ」なものがない場合は、すべてを表示します。

http://jsfiddle.net/mattydsw/KZBNh/3/

var buttons = $(".btn-link");
buttons.on("click",function(){
    $(this).toggleClass('sel');
    buttons.each(function(i,e) {
        var $this = $(e);
        var current = $("."+($this.attr('class').split(' '))[2]+"d");
        if($this.hasClass('sel')) {
            current.show();
        } else {
            current.hide();
        }
    });
    if($('.sel').length==0) {
        $('.myDiv').show();
    }
});
于 2013-07-11T11:29:03.717 に答える