单击按钮（最新的Bootstrap 3.3.6）显示下一个标签页？

问题描述：

感觉就像我已经检查了所有相关的问题，但我还是没能解决以下问题：一个引导选项卡中单击按钮（最新的Bootstrap 3.3.6）显示下一个标签页？

向导中的每个选项卡窗格具有内容和下一个按钮应该显示下一个标签点击时出现窗格。

看到我的简短的JavaScript部分，它应该简单地显示第二个标签页及其内容（id =“step2”），点击下一个按钮íd=“a1”。

我只是不能得到它的工作;谢谢你的帮助！

$(document).ready(function(){ 
 

 
$("#a1").click(function(){ 
 
    $(".nav-tabs a[href='#step2']").tab("show") 
 
}); 
 

 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 

 
<div class="container" id="myWizard"> 
 

 
<div class="navbar"> 
 
<div class="navbar-inner"> 
 

 
<ul class="nav nav-tabs" role="tablist" id="mytabs"> 
 
<li class="active"><a href="#step1" aria-controls="step1" role="tab" data-toggle="tab" id="ali1">1</a></li> 
 
<li><a href="#step2" aria-controls="step2" role="tab" data-toggle="tab" id="ali2">2</a></li> 
 
<li><a href="#step3" aria-controls="step3" role="tab" data-toggle="tab" id="ali3">3</a></li> 
 
<li><a href="#step4" aria-controls="step4" role="tab" data-toggle="tab" id="ali4">4</a></li> 
 
<li><a href="#step5" aria-controls="step5" role="tab" data-toggle="tab" id="ali5">5</a></li> 
 
</ul> 
 

 
</div> 
 
</div> 
 
    
 
<div class="tab-content"> 
 
    
 
<div role="tabpanel" class="tab-pane active" id="step1">content1 
 
<a class="btn next" id="a1">Continue</a> 
 
</div> 
 
     
 
<div role="tabpanel" class="tab-pane" id="step2">content2    
 
<a class="btn next" id="a2">Continue</a> 
 
</div> 
 
     
 
<div role="tabpanel" class="tab-pane" id="step3">content3 
 
<a class="btn next" id="a3">Continue</a> 
 
</div> 
 
     
 
<div role="tabpanel" class="tab-pane" id="step4">content4 
 
<a class="btn next" id="a4">Continue</a> 
 
</div> 
 
     
 
<div role="tabpanel" class="tab-pane" id="step5">content5 
 
<a class="btn first" id="a5">Done</a> 
 
</div> 
 

 
</div> 
 

 
</div> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 

 
</body> 
 
</html>

您正在使用.tab（“show”）检查它是否不是.tabs（“show”） – Raider

可能重复[脚本顺序jquery与引导]（http://*.com/questions/16926086/脚本为了换jQuery的带自举） – chiefr

答

请改变你的脚本初始化这样。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

并尝试。它为我工作。

首先你已经编写了你的jquery初始化文件。

谢谢。

答

Have a look at this它工作正常

我所做的只是变线到这一点，但它是不是真的需要添加li

$(".nav-tabs li a[href='#step2']").tab("show")

正如下面说的，你必须首先得到了jQuery，然后引导的javascript

单击按钮（最新的Bootstrap 3.3.6）显示下一个标签页？

相关推荐