Jquery 1页站点，根据您所在页面的哪个部分更改url和活动导航_Jquery_Html_Scroll

Jquery 1页站点，根据您所在页面的哪个部分更改url和活动导航

jquery html scroll

Jquery 1页站点，根据您所在页面的哪个部分更改url和活动导航,jquery,html,scroll,Jquery,Html,Scroll,我正在尝试创建一个单页网站，只是为了测试一下目前它正在工作，因此单击导航链接将滚动到页面的某些部分，更改url以将id包含到页面，并将活动选项卡css更改为活动虽然在单击导航菜单按钮时它可以工作，但我无法使url更改，例如index.html>index.htmlpage1和活动选项卡在滚动页面时应用活动css样式我已经四处看看了，没法让它工作 <body> <nav class="nav-bar"> <ul> <li cl

我正在尝试创建一个单页网站，只是为了测试一下

目前它正在工作，因此单击导航链接将滚动到页面的某些部分，更改url以将id包含到页面，并将活动选项卡css更改为活动

虽然在单击导航菜单按钮时它可以工作，但我无法使url更改，例如index.html>index.htmlpage1和活动选项卡在滚动页面时应用活动css样式

我已经四处看看了，没法让它工作

<body>
<nav class="nav-bar">
    <ul>
        <li class="top active">Top</li
        ><li class="page1">Menu1</li
        ><li class="page2">Menu2</li
        ><li class="page3">Menu3</li
        ><li class="page4">Menu4</li>
    </ul>
</nav>
    <div id="top"></div>
    <div id="page1"></div>
    <div id="page2"></div>
    <div id="page3"></div>
    <div id="page4"></div>
</body>

上次我检查过你可以通过使用标签来改变HTML中的URL，你不需要任何JavaScript。试试这个：

<nav class="nav-bar">
    <ul>
        <li class="top active">Top</li>
        <li class="page1"><a href="#page1">Menu1</a></li>
        <li class="page2"><a href="#page2">Menu2</a></li>
        <li class="page3"><a href="#page3">Menu3</a></li>
        <li class="page4"><a href="#page4">Menu4</a></li>
    </ul>
</nav>

当然，您可能需要更改一些CSS，因为您现在也有了一个标记

至于你的CSS问题，我必须查看你的网站才能知道问题出在哪里。

你让它变得复杂了。使用Linkking34的解决方案，它会自动在url中添加锚标记的href。我意识到我让它比应该的更复杂了，当使用锚时，我遇到了一个问题，发现这样做更容易！我有这个工作，以改变网址，虽然我的问题是没有与此有关。我想我只是写得很混乱。当前，当im单击选项卡时，url和活动标记css正在工作。我想做的是在我用鼠标滚动页面时改变这些，而不是点击标签。很抱歉让人困惑！您必须检查window.scroll事件何时触发，检查哪个div处于顶部位置并使其处于活动状态。

<nav class="nav-bar">
    <ul>
        <li class="top active">Top</li>
        <li class="page1"><a href="#page1">Menu1</a></li>
        <li class="page2"><a href="#page2">Menu2</a></li>
        <li class="page3"><a href="#page3">Menu3</a></li>
        <li class="page4"><a href="#page4">Menu4</a></li>
    </ul>
</nav>