Question

我正在努力创建一个单页网站，只是为了测试它。

目前正在运行，以便点击导航链接将滚动到页面的某些部分，更改网址以包含页面的ID，并将活动标签css更改为活动。

虽然单击导航菜单按钮时工作正常，但我无法更改URL（例如，index.html＆gt; 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>

JS

$(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;
    });

});

Answer 1

上次我检查过您可以使用<a>标记更改HTML中的网址，您不需要任何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问题，我必须查看你的网站才知道错误。

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

1 个答案: