【发布时间】:2013-11-29 10:33:04
【问题描述】:
大家好,我想制作一个带有嵌套子导航选项卡的垂直导航选项卡,我使用了来自 stackoverflow 的示例代码,这里是 jsfiddle,但我需要更复杂的东西,我尝试但没有得到我想要的下面是scree 拍摄了我真正想要的东西,如果有人对此有想法,请给我一些建议,它应该在 bootstrap 2.3 上
下面是代码
<div class="row">
<div class="span4">
<div class="side-nav-container affix-top">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a data-toggle="tab" href="#Tab2">Tab2</a>
</li>
<li><a data-toggle="tab" href="#Tab3">Tab3</a>
</li>
<li><a data-toggle="tab" href="#Tab4">Tab4</a>
</li>
<li> <a data-toggle="collapse" href="#Tab1">Tab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a>
<ul class="subnav nav nav-tabs nav-stacked collapse" id="Tab1">
<li><a class="supersub" data-toggle="tab" href="#Subtab1">My Super Sub</a></li>
</ul>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a>
</li>
<li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="span8">
<div class="tab-content">
<div class="tab-pane fade active" id="Tab2">Content 2</div>
<div class="tab-pane fade" id="Tab3">Content 3</div>
<div class="tab-pane fade" id="Tab4">Content 4</div>
<div class="tab-pane fade" id="Subtab1">Content 1a</div>
<div class="tab-pane fade" id="Subtab2">Content 1b</div>
<div class="tab-pane fade" id="Subtab3">Content 1c</div>
</div>
</div>
</div>
【问题讨论】:
-
这里的 CSS 乱七八糟,我不确定是否可以完全重写它来帮助你
-
实际上我不需要 css 我只是希望它可以使用 jquery checkout this fiddle link
-
@koala_dev 请帮助我坚持你的答案
标签: javascript jquery css twitter-bootstrap tabs