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

【问题标题】：1 Page site, change url and active nav depending on what part of the page you are at1 页面站点，根据您所在页面的哪个部分更改 url 和活动导航
【发布时间】：2015-05-06 10:06:03
【问题描述】：

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

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

虽然单击导航菜单按钮时它可以工作，但我无法更改 url（例如，index.html > index.html#page1）和活动选项卡以在滚动时应用活动 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>

$(document).ready(function(){
    $("nav ul li").click(function(){
        var sectionId = $(this).attr('class')
        var sectionClass = $(this).attr('class')
        $('.active').removeClass('active');                                 /// Highlight on click
        $('.'+sectionClass).addClass('active');
        $('html, body').animate({                                           /// Scroll on click
            scrollTop: $("#"+sectionId).offset().top},'slow');
        window.location.href = "index.html" + "#" + sectionId;
    });

});

【问题讨论】：

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

标签： jquery html scroll

【解决方案1】：

上次我检查您可以使用<a> 标记更改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，因为您现在也有一个 <a> 标记。

至于您的 CSS 问题，我必须查看您的网站才能知道问题所在。

【讨论】：