如何让 Bootstrap Nav-Pills 选项卡链接和页面链接同时工作答案

【问题标题】：How to get Bootstrap Nav-Pills Tab links AND Page links to work simultaneously如何让 Bootstrap Nav-Pills 选项卡链接和页面链接同时工作
【发布时间】：2019-08-25 01:15:22
【问题描述】：

我正在使用 Bootstrap Nav-Pills，在其中我需要使用指向同一页面上不同选项卡/药丸的链接，并指向同一站点上的不同页面（有些带有锚标记）。

最初，指向其他页面的链接可以正常工作，但我需要添加 JS（我不知道——谢谢 Stack Overflow 的代码）才能使指向其他选项卡/药丸的链接正常工作。现在添加了 JS（这对于让标签/药丸链接正常工作非常有用），其他页面的链接不再工作。

示例：在下面的“一般信息”部分中，“类别”选项卡/药丸链接 (#tab-4) 需要代码底部的 JS 才能工作，但相同的代码禁用了“向我们的办公室发送电子邮件” " (contact.htm#email) 链接。

<body>
  <div id="tabs">
    <ul class="nav nav-pills"> 
      <li class="active"><a href="#tab-1" data-toggle="tab">General</a></li>
      <li class=""><a href="#tab-2" data-toggle="tab">Age Groups</a></li>
      <li class=""><a href="#tab-3" data-toggle="tab">Divisions</a></li>
      <li class=""><a href="#tab-4" data-toggle="tab">Categories</a></li>  
      <li class=""><a href="#tab-5" data-toggle="tab">Entry Fees</a></li>  
    </ul>

    <div class="tab-content">
      <div id="tab-1" class="tab-pane active">
        <h2>GENERAL INFORMATION</h2>
        <p>Contestants may enter as many <a href="#tab-4">categories</a> as desired but each routine must be different.</p>
        <p><i>If you have any questions, please <a href="contact.htm#email">email our office</a>.</i></p>
      </div>
      <div id="tab-2" class="tab-pane">          
        <h2>AGE GROUPS</h2>
      </div>
      <div id="tab-3" class="tab-pane">          
        <h2>DIVISIONS</h2>
      </div>
      <div id="tab-4" class="tab-pane">          
        <h2>CATEGORIES</h2>
      </div>
      <div id="tab-5" class="tab-pane">          
        <h2>ENTRY FEES</h2>
      </div>
    </div>
  </div>

  <script type="text/javascript">
      $(document).ready(function() { 
    $('#tabs a').click(function (e) {
        e.preventDefault();
        $('a[href="' + $(this).attr('href') + '"]').tab('show');
    })
  });
  </script>

  <script type="text/javascript">
  $(function() {
      var hash = window.location.hash;
      // do some validation on the hash here
      hash && $('ul.nav a[href="' + hash + '"]').tab('show');
  });
  </script>

</body>

我仍在寻找解决方案——我承认我是 JS 新手。在我继续搜索的同时，如果有任何 JS 专业人士如何更新现有的 JS，以便我可以链接到标签/药丸和其他页面，我们将不胜感激！

【问题讨论】：

你想在你的网址中添加#email吗？
添加#email 是一个不错的选择，但不是必需的。谢谢！
在第一个脚本中，If-Else 语句是否有效（如果 href 包含 "htm" null，如果不执行脚本）？我尝试自己玩脚本，但到目前为止没有运气。

标签： bootstrap-4 href nav-pills

【解决方案1】：

我认为这可以帮助你。

<div id="tab-1" class="tab-pane active">
    <h2>GENERAL INFORMATION</h2>
    <p>Contestants may enter as many <a href="#tab-4">categories</a> as desired...</p>
    <p><i>If... please <a class="cemail" href="#email">email our office</a>.</i></p>
</div>

jQuery:

$(".cemail").click(function(e) {
    window.location.hash = $(this).attr("href");
    e.preventDefault();
});

【讨论】：

这有帮助，但它指向同一个页面——contact.htm 是一个不同的页面，我在更新的第 4 行中丢失了它。我还在玩它...谢谢！

【解决方案2】：

我想通了！感谢完美主义者先生激发了我到达那里所需的一切。

我需要更改第一个脚本，以便它可以用作一个类。具体来说： (1) 变化： '#tabs a' 到 '.tabsclick' (2) 增加： class="tabsclick" 到正文中的类别链接

【讨论】：