导航栏链接到特定的引导选项卡而不打开新窗口或选项卡?

Question

我正在运行 Bootstrap 3，navbar中带有指向"类别"页面上 Bootstrap 选项卡的链接，如下所示：

<li><a href="/category/#tab1">Tab1</a></li>
<li><a href="/category/#tab2">Tab2</a></li>

在我的"类别"页面上，这是我的标签代码：

<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content in Tab 2.</p>
</div>
</div>

我将如何使用 html 或 jquery/javascript，以便如果人们单击导航栏中的任一链接，无论是来自不同的页面还是已经从"类别"页面转到该页面并打开该选项卡？

我不希望在另一个窗口或选项卡中打开链接，而是在用户当前所在的同一窗口/选项卡中打开链接。(我已经尝试过这个解决方案，将target="_blank"放入navbar的链接中，并添加$('#myTabs a[href="' + window.location.hash + '"]').tab('show');作为javascript。这不是我首选的解决方案。

您可能提供任何建议/解决方案？

Answer 1

我认为这就是你要找的。 它不考虑可变数量的选项卡，但它可以完成 2 个选项卡的工作。

$(document).ready(function(){
$tab1 = $('#tab1');
$tab2 = $('#tab2');
$tablink1 = $('#link_tab1');
$tablink2 = $('#link_tab2');
$('#link_tab1 a').on('click', function(){

$tablink1.addClass("active");
$tab1.addClass("active");
$tab2.removeClass("active");
$tablink2.removeClass("active");
});
$('#link_tab2 a').on('click', function(){
$tablink2.addClass("active");
$tab2.addClass("active");
$tab1.removeClass("active");
$tablink1.removeClass("active");
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" id="myTabs">
<li id="link_tab1" class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
<li id="link_tab2"><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade active in">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade in">
<h3>Tab 2</h3>
<p>Some content in Tab 2.</p>
</div>
</div>