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

【问题标题】：Navbar link to specific bootstrap tab without opening new window or tab?导航栏链接到特定引导选项卡而不打开新窗口或选项卡？
【发布时间】：2017-04-05 16:53:27
【问题描述】：

我正在运行 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 来尝试此解决方案。这不是我的首选解决方案。

您可能需要提供什么建议/解决方案？

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-tabs

【解决方案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>

【讨论】：