Question

我有一个带有两个标签的简单引导程序导航，标记如下所示。

<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片段中切换到正确的标签和内容，这段代码将如何显示？

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

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

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

2 个答案: