Bootstrap 2.1 javascript嵌套选项卡:内部选项卡关闭外部选项卡
我想在我提交错误报告之前我会请求帮助。我在另一个选项卡中有一个twitter引导选项卡,如果我单击以切换到下一个内部选项卡,bootstrap.js不仅会从最近的.tab窗格中删除.active,还会从外部的.tab窗格中删除。我试图深入研究代码,但我的javascript不够好,无法完全理解它。我尝试使用jquery将活动类手动添加到外部的.tab窗格中,还尝试了data toggle=“tab”元素上的.tab('show')。看起来bootstrap.js会找到所有选项卡内容,然后从其子项中删除.active。或者可能我的标记有错误(从99%的经验来看,这是人为错误)。javascript都是样板文件,我只是用tab('show')调用第一个选项卡。以下是我的标记:Bootstrap 2.1 javascript嵌套选项卡:内部选项卡关闭外部选项卡,javascript,jquery,tabs,twitter-bootstrap,Javascript,Jquery,Tabs,Twitter Bootstrap,我想在我提交错误报告之前我会请求帮助。我在另一个选项卡中有一个twitter引导选项卡,如果我单击以切换到下一个内部选项卡,bootstrap.js不仅会从最近的.tab窗格中删除.active,还会从外部的.tab窗格中删除。我试图深入研究代码,但我的javascript不够好,无法完全理解它。我尝试使用jquery将活动类手动添加到外部的.tab窗格中,还尝试了data toggle=“tab”元素上的.tab('show')。看起来bootstrap.js会找到所有选项卡内容,然后从其子项
<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>
-
-
-
-
...
...
单击a href=“#module1-step2”后:
-
-
-
-
...
...
请注意,外部选项卡窗格是如何全部处于非活动状态的
如果有人遇到这个问题,或者能告诉我哪里出了问题,我将非常感激
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>
/*全球的$*/
“严格使用”;
$(函数(){
$('.naviTab li:first child h1').tab('show');//显示加载时外部选项卡的第一个子项。可以只向标记添加一个.active
$(“#侧边栏li:first child”).addClass('active');//这是用于嵌入外部选项卡链接的手风琴
$('.stepTab a')。单击(函数(){
if($(this).nestest('li').hasClass('active')==false){//这应该检查外部选项卡是否具有.active,如果没有,则添加它。不幸的是,它不起作用。。。
$(this).closest('li').addClass('active');
}
$(this).sides().removeClass('active');//这是为了在内部选项卡a的
$(this.addClass('active');
});
});
为任何建议干杯 也许这有助于使用Bootstrap框架定制手风琴问题在于,我没有在内部选项卡中的链接中使用an,而只是一个带有a的div(出于css原因,我不得不这样做)。我不知道引导要求链接采用ul>li>a格式。现在它知道了!我会留下这个问题,以防有人有同样的问题。为帮助干杯 如albertedevigo所述,您只需为每个选项卡提供唯一的ID,无论该选项卡是否嵌套,这是因为javascript操作将打开/关闭此特定选项卡:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
<li><a href="#tab4" data-toggle="tab">Section 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane" id="tab4">
<p>Howdy, I'm in Section 4.</p>
</div>
</div>
</div>
</div>
</div>
我在第一区
你好,我在第二区
我在第三节
你好,我在第四节
看看你能发布你的Javascript吗?也许你选择了这两个元素…我更新了帖子并加入了js。即使我不包含任何js,只是在标记的第一个外部选项卡上手动设置active,它的工作原理也是一样的。我试图停止默认行为的尝试也没有成功。我猜引导程序有一个bug,当它从选项卡窗格中删除.active时,会查找所有选项卡内容。恐怕您发现了一个bug。我已经从文档中嵌套了选项卡,但问题仍然存在。看一看:你说得对!这是一个稍有不同的设置和一个稍有不同的错误(在本例中,外部选项卡未设置为非活动,但内部选项卡不会切换到下一个选项卡,如果您想返回,则会中断。我将为这两个选项卡提交错误报告!我的jsfiddle中有一个错误,更改ID它可以工作:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
<li><a href="#tab4" data-toggle="tab">Section 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane" id="tab4">
<p>Howdy, I'm in Section 4.</p>
</div>
</div>
</div>
</div>
</div>