JQuery，Bootstrap导航 - 如何添加上一个/下一个按钮？

I am using bootstrap navs for my page and I want to add next and prev buttons to my tab content.

我正在为我的页面使用bootstrap导航,我想在我的标签内容中添加next和prev按钮。

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

$(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代码,但我不知道怎么写[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:

这是bootstrap导航的工作解决方案:

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);
  });
});

1 个解决方案

#1

I think the problem is href property will have absolute path so try

我认为问题是href属性会有绝对路径所以试试

$('a[href="'+ $(this).attr('href')+'"]').tab('show');