Question

我正在尝试使用bootstrap切换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？

Answer 1

迭代按钮，仅查找“活动”并显示与“活动”元素对应的元素，其他隐藏。如果没有任何“活跃”显示一切。

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();
    }
});

bootstrap JS和data-toggle =“buttons-checkbox”显示div

1 个答案: