[英]JQuery, Bootstrap navs - how do I add prev/next buttons?
I am using bootstrap navs for my page and I want to add next and prev buttons to my tab content. 我正在为页面使用引导导航,我想向选项卡内容添加下一个和上一个按钮。
HTML 的HTML
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#randomtab">Randomtab</a></li>
</ul>
<div class="tab-content">
<div id="overview" class="tab-pane fade in active">
<a href="#contact" class="btn btn-info pull-right">Next</a>
</div>
<div id="contact" class="tab-pane fade in active">
</div>
<div id="randomtab" class="tab-pane fade in active">
</div>
</div>
Javascript Java脚本
$(document).ready(function() {
$(".nav-tabs a").click(function() {
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(event) {
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
$(".act span").text(x);
$(".prev span").text(y);
});
});
I tried to add this JavaScript code but I don't know how to write a[href=(this).href]
我试图添加此JavaScript代码,但不知道如何编写
a[href=(this).href]
$(".tab-pane a").click(function() {
$('a[href="(this.href)"]').tab('show'); //this row is wrong
});
$('.tab-pane a').on('shown.bs.tab', function(event) {
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
$(".act span").text(x);
$(".prev span").text(y);
});
This is my solution, maybe there is a better one but I don't know...Thank you. 这是我的解决方案,也许有更好的解决方案,但我不知道...谢谢。
PS: Please leave comment below if you don't understand my question, so I can edit this post. PS:如果您不明白我的问题,请在下面留下评论,以便我可以编辑此帖子。
EDIT 编辑
This is the working solution for bootstrap navs: 这是引导导航的有效解决方案:
thanks to Arun P Johny 感谢Arun P Johny
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#randomtab">Randomtab</a></li>
</ul>
<div class="tab-content">
<div id="overview" class="tab-pane fade in active">
<a href="#contact" class="btn btn-info pull-right">Next</a>
</div>
<div id="contact" class="tab-pane fade in active">
<a href="#overview" class="btn btn-info pull-left">Prev</a>
<a href="#randomtab" class="btn btn-info pull-right">Next</a>
</div>
<div id="randomtab" class="tab-pane fade in active">
<a href="#contact" class="btn btn-info pull-left">Prev</a>
</div>
</div>
$(document).ready(function() {
$(".nav-tabs a").click(function() {
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(event) {
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
$(".act span").text(x);
$(".prev span").text(y);
});
$(".tab-pane a").click(function() {
$('a[href="' + $(this).attr('href') + '"]').tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(event) {
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
$(".act span").text(x);
$(".prev span").text(y);
});
});
我认为问题在于href
属性将具有绝对路径,因此请尝试
$('a[href="'+ $(this).attr('href')+'"]').tab('show');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.