Question

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

我的js在下面查找URL中的哈希，如果显示哈希，则触发哈希的点击效果。我试图使用index.html＃tab2，但它不会向下移动到#features部分，因此我不确定如何解决这个问题。

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

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

Answer 1

您是否尝试过在网址中使用var https = require('https') var username = "monajalal3" var request = https.get("https://teamtreehouse.com/" + username +".json", function (response) { console.log(response.statusCode); }); request.on("error", function (error) { console.error(error.status); });滚动到标签按钮？这可以通过向下滚动到功能部分来解决您的问题，因为#tab2元素位于功能部分的顶部。

JSFiddle在iframe中运行，您需要在iframe的链接中提供哈希。解决方法是使用JavaScript设置哈希。如果您将#tab2设置为脚本部分的第一行，则会向下滚动并显示第二个标签。

如果您坚持滚动到window.location.hash = "tab2";元素，您可以通过JavaScript轻松实现这一点。这样您还可以创建一个向下滚动到该部分的动画。有关详细信息，请参阅此答案：https://stackoverflow.com/a/16475234/3233827

URL锚点哈希，然后通过URL使用另一个ID打开一个选项卡

1 个答案: