バグレポートを提出する前に、SO に助けを求めようと思いました。別のタブ内に twitter ブートストラップ タブがあり、クリックして次の内側のタブに変更すると、bootstrap.js は最も近い .tab-pane から .active を削除するだけでなく、外側の .tab-pane からも削除します。コードに飛び込もうとしましたが、私の JavaScript は完全に理解するには十分ではありません。jquery を使用してアクティブなクラスを外側の .tab-pane に手動で追加しようとし、data-toggle="tab" 要素で .tab('show') も試しました。bootstrap.js がすべての.tab-content を見つけて、その子から .active を削除するようです。あるいは、マークアップに間違いがあるのかもしれません (経験上、99% の人為的ミスです)。javascript はすべてボイラープレートです。最初のタブを tab('show') で呼び出すだけです。ここに私のマークアップがあります:
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane active">
<div class="wizard stepTab">
<a class="active" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane active" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
href="#module1-step2" をクリックした後:
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane">
<div class="wizard stepTab">
<a class="" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="active" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane active">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
外側のタブ ペインがすべて非アクティブになっていることに注目してください。
誰かがこの問題に遭遇した場合、または私がどこを台無しにしたかを教えてくれれば、とても感謝しています!
EDIT1これ が私のjavascriptです。実際には js を含める必要はありません。なぜなら、bootstrap.js は html 属性だけで問題なく動作するからです (おそらく、それが壊れる理由です)。さまざまなアプローチ (.each()、e.preventDefault()) を試しましたが、何も機能していないようです。とにかく、ここに私のjsがあります：
<script>
/*global $*/
"use strict";
$(function () {
$('.naviTab li:first-child h1').tab('show'); //shows the first child of the outer tab on load. Could just add an .active to the markup instead
$('#sidebar li:first-child').addClass('active'); //this is for the accordion that the outer tab links are enbedded in
$('.stepTab a').click(function () {
if ($(this).closest('li').hasClass('active') == false) { //this is supposed to check if the outer tab has .active and add it if it doesn't. Unfortunately it doesn't work...
$(this).closest('li').addClass('active');
}
$(this).siblings().removeClass('active'); //this is for css styling purposes on the inner tab a's
$(this).addClass('active');
});
});
</script>
提案をお待ちしております。