Question

我希望能够在点击导航栏中的链接时自动向下滚动。现在，当单击导航栏中的链接时，页面将重新加载并返回到页面顶部。我使用JQuery来隐藏现在未选择的部分我需要在单击链接时添加滚动方法。或者构建它，以便在选择导航栏链接时，页面将使用新的未隐藏部分重新加载，页面将向下移动到导航栏。如果可能，我想看两种方法。

 <div id="tab_container">
                    <nav id="tabs">
                        <ul id="nav">
                            <li class="active"><a href="#">About</a></li>
                            <li class="inactive"><a href="#">Services</a></li>
                            <li class="inactive"><a href="#">Our Staff</a></li>
                            <li class="inactive"><a href="#">book</a></li>
                            <li class="inactive"><a href="#">Gift Cards</a></li>
                            <li class="inactive"><a href="#">Reviews</a></li>
                        </ul>
                    </nav>
                </div>

Answer 1

您需要为要指向的链接提供ID。如果您只链接到“＃”，则只会重新加载页面。

此链接将跳转到H2

上的相应ID

    <a href="#mylink">Click to move to ID 'myLink'</a>

    <h2 id="myLink">My link</h2>

至于jQuery，您使用的是.hide()，.toggle()还是.remove()？

.hide() does exactly that，但不会将其从DOM中删除。

.toggle() switches between visible and invisible。

来自DOM的{p> .remove()实际上是deletes your target，之后无法对其进行操作。

单击导航链接时，如何向下滚动到导航栏

1 个答案: