Question

我正在运行Bootstrap 3，我的navbar中的链接指向＆＃39;类别＆＃39;上的Bootstrap标签。页面，像这样：

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

在我的＆＃39;类别＆＃39;页面，这里是我的标签代码：

<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，以便当用户点击导航栏中的任一链接时，无论是来自其他页面还是来自＆＃39;类别＆＃39;页面是否已打开该选项卡打开该页面？

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

您可能需要提供哪些建议/解决方案？

Answer 1

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

＆＃13;

$(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");
  });
});

＆＃13;

<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>

＆＃13;

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

1 个答案: