0

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

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

示例：在下面的“一般信息”部分中，“类别”选项卡/药丸链接 (#tab-4) 需要代码底部的 JS 才能工作，但相同的代码禁用了“给我们的办公室发送电子邮件”（联系.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，以便我可以链接到选项卡/药丸和其他页面，我们将不胜感激！

4

2 回答 2

0

我认为这可以帮助你。

<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();
});
于 2019-08-25T04:59:17.297 回答
0

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

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

于 2019-08-25T20:39:36.320 回答