我想在单击按钮时逐个显示下一个引导选项卡。现在点击按钮，只显示第二个选项卡，因为我已经硬编码了它，应该用什么来代替href="#second"如何在href中获得特定的id？当我第一次点击其他选项卡而不是第一个激活的选项卡时，用户必须收到错误消息，即"用户必须点击第一个选项卡，然后点击其他选项卡"，使用noty插件意味着在页面加载时禁用除第一个选项卡外的其他选项卡。
这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#changetabbutton').click(function(e){
e.preventDefault();
$('#mytabs a[href="#second"]').tab('show');
});
});
</script>
</head>
<body>
<div class="container">
<!-- Nav tabs -->
<ul id="mytabs" class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#first" role="tab" data-toggle="tab">
<i class="fa fa-home"></i> First tab
</a>
</li>
<li><a href="#second" role="tab" data-toggle="tab">
<i class="fa fa-user"></i> Second tab
</a>
</li>
<li>
<a href="#third" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Third tab
</a>
</li>
<li>
<a href="#fourth" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fourth tab
</a>
</li>
<li>
<a href="#fourth" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fifth tab
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade active in cont" id="first">
<h2>First tab</h2>
</div>
<div class="tab-pane fade cont" id="second">
<h2>Second tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Third tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Fourth tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Fifth tab</h2>
</div>
</div>
<button type="button" id="changetabbutton" class="btn btn-primary ">Set next tab</button>
</div>
</body>
</html>
通过使用$('.nav-tabs > .active').next('li').find('a')选择器，您可以选择下一个选项卡并将其激活。如果没有找到下一个选择器，则激活第一个选项卡。
$(function(){
$('#changetabbutton').click(function(e){
e.preventDefault();
var next_tab = $('.nav-tabs > .active').next('li').find('a');
if(next_tab.length>0){
next_tab.trigger('click');
}else{
$('.nav-tabs li:eq(0) a').trigger('click');
}
});
});<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Nav tabs -->
<ul id="mytabs" class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#first" role="tab" data-toggle="tab">
<i class="fa fa-home"></i> First tab
</a>
</li>
<li><a href="#second" role="tab" data-toggle="tab">
<i class="fa fa-user"></i> Second tab
</a>
</li>
<li>
<a href="#third" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Third tab
</a>
</li>
<li>
<a href="#fourth" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fourth tab
</a>
</li>
<li>
<a href="#fourth" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fifth tab
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade active in cont" id="first">
<h2>First tab</h2>
</div>
<div class="tab-pane fade cont" id="second">
<h2>Second tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Third tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Fourth tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Fifth tab</h2>
</div>
</div>
<button type="button" id="changetabbutton" class="btn btn-primary ">Set next tab</button>
</div> $('#changetabbutton').click(function(e){
e.preventDefault();
var next = $('#mytabs li.active').next()
next.length?
next.find('a').click():
$('#mytabs li a')[0].click();
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#changetabbutton').click(function(e){
e.preventDefault();
var next = $('#mytabs li.active').next()
next.length?
next.find('a').click():
$('#mytabs li a')[0].click();
});
});
</script>
</head>
<body>
<div class="container">
<!-- Nav tabs -->
<ul id="mytabs" class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#first" role="tab" data-toggle="tab">
<i class="fa fa-home"></i> First tab
</a>
</li>
<li><a href="#second" role="tab" data-toggle="tab">
<i class="fa fa-user"></i> Second tab
</a>
</li>
<li>
<a href="#third" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Third tab
</a>
</li>
<li>
<a href="#fourth" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fourth tab
</a>
</li>
<li>
<a href="#fourth" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fifth tab
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade active in cont" id="first">
<h2>First tab</h2>
</div>
<div class="tab-pane fade cont" id="second">
<h2>Second tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Third tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Fourth tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Fifth tab</h2>
</div>
</div>
<button type="button" id="changetabbutton" class="btn btn-primary ">Set next tab</button>
</div>试试这个-
$('#changetabbutton').click(function(e) {
e.preventDefault();
var link = $('#mytabs .active').next().children('a').attr('href');
$('#mytabs a[href="' + link + '"]').tab('show');
});<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Nav tabs -->
<ul id="mytabs" class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#first" role="tab" data-toggle="tab">
<i class="fa fa-home"></i> First tab
</a>
</li>
<li>
<a href="#second" role="tab" data-toggle="tab">
<i class="fa fa-user"></i> Second tab
</a>
</li>
<li>
<a href="#third" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Third tab
</a>
</li>
<li>
<a href="#fourth" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fourth tab
</a>
</li>
<li>
<a href="#fifth" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fifth tab
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade active in cont" id="first">
<h2>First tab</h2>
</div>
<div class="tab-pane fade cont" id="second">
<h2>Second tab</h2>
</div>
<div class="tab-pane fade cont" id="third">
<h2>Third tab</h2>
</div>
<div class="tab-pane fade cont" id="fourth">
<h2>Fourth tab</h2>
</div>
<div class="tab-pane fade cont" id="fifth">
<h2>Fifth tab</h2>
</div>
</div>
<button type="button" id="changetabbutton" class="btn btn-primary ">Set next tab</button>
</div>在JQUery 中使用此代码
$('#changetabbutton').click(function(e){
e.preventDefault();
$('#mytabs a[href="#second"]').tab('show');
})
将选项卡编号保存为变量并添加到其中，或将其重置为1，这取决于它们所在的选项卡。为了适应这个解决方案，我将选项卡的id重命名为数字。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
var tab = 1;
$('#changetabbutton').click(function(e){
e.preventDefault();
if(tab>4){
tab = 1;
}else{
tab++;
}
$('#mytabs a[href="#'+tab+'"]').tab('show');
});
});
</script>
</head>
<body>
<div class="container">
<!-- Nav tabs -->
<ul id="mytabs" class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#1" role="tab" data-toggle="tab">
<i class="fa fa-home"></i> First tab
</a>
</li>
<li><a href="#2" role="tab" data-toggle="tab">
<i class="fa fa-user"></i> Second tab
</a>
</li>
<li>
<a href="#3" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Third tab
</a>
</li>
<li>
<a href="#4" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fourth tab
</a>
</li>
<li>
<a href="#5" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Fifth tab
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade active in cont" id="1">
<h2>First tab</h2>
</div>
<div class="tab-pane fade cont" id="2">
<h2>Second tab</h2>
</div>
<div class="tab-pane fade cont" id="3">
<h2>Third tab</h2>
</div>
<div class="tab-pane fade cont" id="4">
<h2>Fourth tab</h2>
</div>
<div class="tab-pane fade cont" id="5">
<h2>Fifth tab</h2>
</div>
</div>
<button type="button" id="changetabbutton" class="btn btn-primary ">Set next tab</button>
</div>
</body>
</html>尝试以下代码对我有效
$("#buttonNext").click(function(e){
$('#myTab li:nth-child(2) button').tab('show')
});