单击按钮显示下一个选项卡窗格(最新 Bootstrap 3.3.6)?
show next tab-pane on click of button (latest Bootstrap 3.3.6)?
感觉我已经检查了所有相关问题,但仍然无法解决以下问题:
在 bootstrap 选项卡向导中,每个选项卡窗格都有内容和一个下一步按钮,应该 在单击时显示下一个选项卡窗格。
查看我的简短 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>
请像这样更改您的脚本初始化。
<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 初始化文件。
谢谢。
我所做的只是将行更改为此,但实际上并不需要添加 li
$(".nav-tabs li a[href='#step2']").tab("show")
如下所述,必须先获得jQuery,然后bootstrap javascript
感觉我已经检查了所有相关问题,但仍然无法解决以下问题:
在 bootstrap 选项卡向导中,每个选项卡窗格都有内容和一个下一步按钮,应该 在单击时显示下一个选项卡窗格。
查看我的简短 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>
<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 初始化文件。
谢谢。
我所做的只是将行更改为此,但实际上并不需要添加 li
$(".nav-tabs li a[href='#step2']").tab("show")
如下所述,必须先获得jQuery,然后bootstrap javascript