URL 锚散列，然后通过 URL 使用另一个 id 打开一个选项卡答案

【问题标题】：URL anchor hash, then open a tab using another id via URLURL 锚散列，然后通过 URL 使用另一个 id 打开一个选项卡
【发布时间】：2016-06-09 21:12:58
【问题描述】：

我需要一个 URL 参数来通过哈希 ID (#features) 选择一个部分，然后在该部分中打开选项卡 #2（默认情况下打开选项卡 1）。我想使用 index.html#features，然后在找到该部分后，打开标签 #2 (#tab2)。

我下面的js在URL中查找hash，如果显示hash，就触发hash的点击效果。我试图使用 index.html#tab2，但它不会下移到 #features 部分，所以我不知道如何解决这个问题。

#features 部分位于页面底部附近，因此我需要先找到该部分，然后打开第二个选项卡。

JS Fiddle

<article id="features">
    <div class="tab-wrapper">
        <ul class="tab-wrapper__tab-list" role="tablist">
            <li role="presentation">
                <a href="#tab1" role="tab" aria-controls="panel0">Tab One</a>
            </li>
            <li role="presentation">
                <a href="#tab2" role="tab" aria-controls="panel1">Tab Two</a>
            </li>
            <li role="presentation">
                <a href="#tab3" role="tab" aria-controls="panel2">Tab Three</a>
            </li>
        </ul>

        <div id="tab1" class="tab-wrapper__tab" role="tabpanel">
            <div class="tab-wrapper__content-wrapper">
                <p>Lorem ipsum dolor sit amet, nam an purto autem contentiones. Cum solet verear petentium ut, an incorrupte interesset sit, eu sea dicant suscipit definiebas. Ut illum habemus sententiae sea, nec nibh accusata an. Tempor dissentias ea nam. Utinam volutpat sed at, dicta errem cu est.</p>
            </div>
        </div>

        <div id="tab2" class="tab-wrapper__tab" role="tabpanel">
            <div class="tab-wrapper__content-wrapper">
                <p>Vel zril putent incorrupte ei. Cu tation veniam euripidis vel, diceret minimum deserunt an ius. Eam ex probatus laboramus, cum ad noluisse suscipit, everti accusata id eam. Ius et commune recusabo, id munere alterum mei. Rebum oratio malorum usu te, no feugait inciderint eos. Eum viderer deseruisse instructior at. Nusquam expetenda eam et.</p>
            </div>
        </div>

        <div id="tab3" class="tab-wrapper__tab" role="tabpanel">
            <div class="tab-wrapper__content-wrapper">
                <p>Tacimates consetetur his eu. Amet persecuti an eum, ne facete audiam mei. Pri et alia urbanitas, dicunt tacimates eos eu. Ut sit inani urbanitas. Has in equidem atomorum accommodare. Te vim decore cetero intellegebat. Saepe timeam posidonium pro te, nulla insolens adipisci ne vis.</p>
            </div>
        </div>
    </div>
</article>

<script>
    $(function () {
        var hash = $.trim(window.location.hash);

        if (hash) $('.tab-wrapper__tab-list a[href$="'+ hash +'"]').trigger('click');
    });
</script>

【问题讨论】：

标签： javascript url query-string

【解决方案1】：

您是否尝试过滚动到 URL 中带有 #tab2 的标签按钮？这将解决您向下滚动到功能部分的问题，因为#tab2 元素位于功能部分的顶部。

JSFiddle 在 iframe 中运行，您需要在 iframe 的链接中提供哈希值。解决此问题的方法是使用 JavaScript 设置哈希。如果您将window.location.hash = "tab2"; 设置为脚本部分的第一行，它会向下滚动并显示第二个选项卡。

如果您坚持滚动到 #features 元素，您可以使用 JavaScript 轻松实现这一点。这还允许您创建一个向下滚动到该部分的动画。有关更多信息，请参阅此答案：https://stackoverflow.com/a/16475234/3233827

【讨论】：