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

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>

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

问题是关于和联系不是页面。它们是主页的部分。当我在博客页面时，点击“About”链接，它会回到首页，回到about所在的地方。但是没有添加活动，因为有一个页面重新加载，我的点击事件没有改变。这就是我卡住的地方。看起来很简单，但我根本不知道该怎么做......

我正在使用 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

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

根据您的帖子，我了解到您已经将 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
});