引导标签 - 点两个标签同时

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home" onclick="location.href='#home1'">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1" onclick="location.href='#menu11'">Menu 1</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Some content in menu 1.</p> 
    </div> 
</div> 

<hr /> 

<div class="tab-content"> 
    <div id="home1" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu11" class="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Some content in menu 1.</p> 
    </div> 
</div>

和JS

$('.nav-tabs a').click(function(){ 
    $(this).tab('show'); 
})

如何让它以这种方式工作，点击一个链接后 - 两个DIVS的内容会发生变化？我正在寻找信息如何不指向ID，但是没有成功。

来源

2015-09-28 Julia Galden

我创建了一个jsfiddle http://jsfiddle.net/an0r4buk/1/来展示您试图实现的目标。

$('.nav-tabs a').click(function() { 
    $(this).tab('show'); 
    $("<a>").data("target", $(this).data("second-tab")).tab("show") 
})

引导切换一个标签的时间，这就是为什么我创建了一个新的定位元素，设置它的目标，你要显示的第二个选项卡。

我修改你的HTML这样的：

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home" data-second-tab="#home1">Home</a> 
    </li> 
    <li><a data-toggle="tab" href="#menu1" data-second-tab="#menu11">Menu 1</a> 
    </li> 
</ul>

的href属性用于第一个选项卡（主/和home1），该data-second-tab切换第二个选项卡。

来源

2015-09-28 08:08:45

谢谢！这是我需要的！ –

没问题。不要忘记标记一个被接受的问题。 –

试试这个http://jsfiddle.net/serGlazkov/an0r4buk/2/

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    var $previousActiveTab = $(e.relatedTarget); 
    var $newlyActiveTab = $(e.target); 
    var other = $previousActiveTab.attr('href') + '1'; 
    var other1 = $newlyActiveTab.attr('href') + '1'; 
    $(other).removeClass('active in'); 
    $(other1).addClass('active in'); 
})

来源

2015-09-28 08:11:59 sglazkov

太复杂了。它可能在这种特殊情况下工作，但是imo OP不会坚持'home' /'home1'。 –

我同意，你的方式更好 – sglazkov

选择第二个div.tab-content与id="tab-content2"然后将以下代码就可以了：

$('.nav-tabs a').click(function(){ 
    $(this).tab('show') 
    var name = $(this).attr('href').substr(1) 
    $('#tab-content2').children().each(function(el) { 
    if (name + '1' === $(this).attr('id')) { 
     $(this).addClass('active') 
    } else { 
     $(this).removeClass('active') 
    } 
    }) 
})

来源

2015-09-28 08:18:47 dimakura

引导标签 - 点两个标签同时

回答

相关问题