Question

我有以下代码的引导标签：

<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而是上课，到目前为止还没有成功。

Answer 1

我创建了一个jsfiddle http://jsfiddle.net/an0r4buk/1/来展示你想要实现的目标。

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

Bootstrap一次切换一个标签，这就是为什么我创建一个新的锚元素并将其目标设置为你想要显示的第二个标签。

我修改了你的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属性用于第一个标签（home / home1），data-second-tab切换第二个标签。

Answer 2

试试这个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');
})

Answer 3

使用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')
    }
  })
})

Bootstrap选项卡 - 同时指向两个选项卡

3 个答案: