导航栏 link 到特定 bootstrap 选项卡而不打开新的 window 或选项卡？

Question

我是运行 Bootstrap 3 link 我在 'Category' 页面上的 navbar 到 Bootstrap 选项卡中，例如所以：

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

在我的 'category' 页面上，这是我的标签代码：

<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，以便如果人们点击导航栏中的任一 link，无论它来自不同的页面还是来自 'category' 页面已经转到打开该选项卡的那个页面？

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

您有什么 advice/solutions 可以提供吗？

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>

导航栏 link 到特定 bootstrap 选项卡而不打开新的 window 或选项卡？

Navbar link to specific bootstrap tab without opening new window or tab?

javascript

jquery

twitter-bootstrap

bootstrap-tabs