Question

我的主页上有这个菜单。

<ul class="menu">
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

在我的about页面中，代码略有不同。

<ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a class="active" href="blog.html">Blog</a></li>
    <li><a href="index.html#about">About</a></li>
    <li><a href="index.html#contact">Contact</a></li>
</ul>

基本上，当我点击一个菜单项时，活动类只会添加到单击的菜单项中。这很容易。

问题是关于和联系不是页面。它们是主页的部分。当我在博客页面中时，点击＆＃34;关于＆＃34;链接，它将返回主页，到约的居住地点。但是没有添加活动，因为页面重新加载，我的点击事件不做任何更改。这是我被卡住的地方。这似乎很容易，但我根本不知道该怎么做......

我使用jQuery，所以如果你们帮助我使用jQuery，它会更好。感谢。

Answer 1

请试用此代码

<ul class="menu">
    <li><a href="index.html" class="home">Home</a></li>
    <li><a class="active blog" href="blog.html">Blog</a></li>
    <li><a href="index.html#about" class="about">About</a></li>
    <li><a href="index.html#contact" class="contact">Contact</a></li>
</ul>

<script>
    $('.menu .about').click(function(){

        $('.home').removeClass('active');
        $('.blog').removeClass('active');
        $('.contact').removeClass('active');
        $('.about').addClass('active');

    });

    $('.menu .contact').click(function(){

        $('.home').removeClass('active');
        $('.blog').removeClass('active');
        $('.contact').addClass('active');
        $('.about').removeClass('active');

    });
</script>

Answer 2

由于点击事件不起作用 - 无法正常工作，当您从其他页面重定向时，您需要从当前网址读取哈希值（例如index.html #contact）。 / p>

根据您的帖子，我了解您已将id-s添加到菜单项中，如下所示：

<ul class="menu">
    <li><a id="home" class="active" href="index.html">Home</a></li>
    <li><a id="blog" href="blog.html">Blog</a></li>
    <li><a id="about" href="#about">About</a></li>
    <li><a id="contact" href="#contact">Contact</a></li>
</ul>

（我已将id-s添加到每个菜单链接中）

然后你需要使用更多的jQuery：

$(function() {
    var MenuSelected = location.hash.replace("#",""); //remove hash, so the variable can be directly used as id
    $("ul.menu li").removeClass("active"); // reset active element in case that some element is already set to active
    $("#" + MenuSelected).addClass("active");
});

您也可以使用此代码点击同一页面，只需在

中使用它即可

$("ul.menu li").click(function(){
   // JS code from above
});

如何在页面更改时将活动类添加到锚点？

2 个答案: