Bootstrap 選項卡 - 同時指向兩個選項卡

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

用id="tab-content2" div.tab-content標記你的第二個div.tab-content然后下面的代碼就可以了：

$('.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')
    }
  })
})