如何在引导选项卡中使用深层链接？答案

【问题标题】：How can I use deep links in bootstrap tabs?如何在引导选项卡中使用深层链接？
【发布时间】：2015-04-18 22:27:56
【问题描述】：

我有一个带有两个选项卡的简单引导导航，其标记如下所示。

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
    <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
</ul>

<div class="tab-content">
    <div id="sectionA" class="tab-pane fade in active">
        <p>Section A content…</p>
    </div>
    <div id="sectionB" class="tab-pane fade">
        <p>Section B content…</p>
    </div>
</div>

我想要的是每个标签都有深层链接。因此，我想要 example.com/contentA 和 example.com/contentB，而不是 #sectionA 和 #sectionB。

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="example.com/contentA">Content A</a></li>
    <li><a data-toggle="tab" href="example.com/contentB">Content B</a></li>
</ul>

<div class="tab-content">
    <div id="contentA" class="tab-pane fade in active">
        <p>ContentA content…</p>
    </div>
    <div id="contentB" class="tab-pane fade">
        <p>ContentB content…</p>
    </div>
</div>

这一切都是为了给搜索引擎爬虫提供深度链接。然后我将使用 javascript 来处理用户点击。比如：

$('a').on("click", function (e) {
    var href = $(this).attr("href");

    history.pushState(null, null, href);

    // Show clicked tab here + associated content
    $('do something to show clicked tab here')...

    e.preventDefault();
});

由于我需要在我的 javascript sn-p 中同时切换到正确的选项卡和内容，所以这段代码看起来如何？

【问题讨论】：

标签： jquery twitter-bootstrap tabs

【解决方案1】：

我找到了解决这个问题的方法。诀窍是首先显示我想要的选项卡，删除任何活动的选项卡窗格，然后将单击的选项卡窗格设置为活动的。

$('a').on("click", function (e) {
    var href = $(this).attr("href");

    history.pushState(null, null, href);

    var showForId = $(this).prop('id');

    $('a[id="' + showForId + '"').tab('show');
    $('.tab-pane').removeClass('active');
    $('.tab-pane[id="' + showForId + '"]').addClass('active');

    e.preventDefault();
});

这很有效，我现在可以在我的引导选项卡中使用像 example.com/myContentA 这样的深层链接，而不是 #xyz。

【讨论】：

【解决方案2】：

我一直在处理类似的问题，但也希望页面跳转到选项卡的位置，允许顶部菜单栏的偏移量。这是最终对我有用的脚本：

 <script>
  $(document).ready(() => {
    var url = window.location.href;
      if (url.indexOf("#") > 0){
      var activeTab = url.substring(url.indexOf("#") + 1);
      $('.nav[role="tablist"] a[href="#'+activeTab+'"]').tab('show');
      var position = $("#tab-options").offset().top -57;
      $("html, body").animate({
        scrollTop: position
    }, 1000);
    }
  });
</script>

【讨论】：