文本链接更改引导选项卡?

时间:2016-05-12 11:42:18

标签: javascript jquery twitter-bootstrap

我正在使用bootstrap选项卡和一些添加的jquery来显示基于url的选项卡。我想要实现的是通过简单的文本链接获得相同的行为,但我不知道我缺少什么。

因此,在第一个标签页中,点击下方:

<a class="xam" href="#second-tab">link to other page tab</a>

并导航到第二个标签。

<ul class="nav nav-tabs">
<li><a href="#first-tab" data-toggle="tab">first<i class="fa"></i></a></li>
<li><a href="#second-tab" data-toggle="tab">second<i class="fa"></i></a></li>
</ul>

这是jquery

var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

1 个答案:

答案 0 :(得分:2)

这样的事情?

$('.xam').on('click', function(){
  var tab = $(this).attr("href");
  $('a[href="'+tab+'"]').tab('show')
  $(tab).tab('show')
});