文本链接可更改引导程序选项卡

Text link to change the bootstrap tab?

本文关键字：选项 引导程序 可更改 链接 文本      更新时间：2023-09-26

我使用引导选项卡和一些添加的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;
})

这样的东西？

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