jquery - 默认链接颜色保持活动状态，直到鼠标单击另一个链接

Question

当您进入站点时，我的默认链接颜色处于活动状态，但是当鼠标单击另一个链接并且新的当前页面现在处于活动状态时，我似乎无法将其删除。这是我的代码。

JS

$("a").on("click", function() { 
    $(".active").removeClass("active"); 
});

CSS

.active{ 
    color: #ffff00 
    !important; 
}

a { 
    text-decoration: none; 
    z-index: 5; 
    font-family: arial, "Trebuchet MS"; 
    cursor: pointer; 
    color: #2777A3; 
}

HTML

<a href="http://www.pro.com/" target="_self" class="active">Home</a>`

Answer 1

$("a").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

http://jsfiddle.net/UbVVH/1/

Answer 2

这是你想要的吗？

$('a').click(function(){
    if ( $(this).hasClass('active') ) {
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }

})

Answer 3

如果你只有 HTML、CSS 和 JQuery，你只需要active在每个页面的正确链接上设置类。您不需要使用 JQuery 删除类。

似乎正在发生的事情是，当用户单击链接时，页面会重新加载，这会重置 CSS 并将active类Home再次放在链接上。每次用户点击，页面都会刷新并重置类。

因此，JQuery 将有效地删除该类，但随后单击链接会将浏览器发送到新页面并重置 CSS。

例子：

家

<a href="http://www.pro.com/" target="_self" class="active">Home</a>
<a href="http://www.pro.com/products" target="_self">Products</a>
<a href="http://www.pro.com/solutions" target="_self">Solutions</a>

其他第 1 页

<a href="http://www.pro.com/" target="_self">Home</a>
<a href="http://www.pro.com/products" target="_self" class="active">Products</a>
<a href="http://www.pro.com/solutions" target="_self">Solutions</a>

其他第 2 页

<a href="http://www.pro.com/" target="_self">Home</a>
<a href="http://www.pro.com/products" target="_self">Products</a>
<a href="http://www.pro.com/solutions" target="_self" class="active">Solutions</a>

Answer 4

好吧，如果您单击一个链接，我猜它会打开一个新页面，因此活动链接会在每次页面加载时重置。因此，您可能想要做的是检查您是否在每个链接的当前页面上。

所以也许在php中：

<a href="http://www.pro.com/" target="_self" class="<?php echo ($page === 'home' ?  'active' : ''; ?>">Home</a>

如果你想做纯 JavaScript：

$(document).ready(function()
{
    var path = window.location.pathname.toString().split('/')[0];

    $("a.active").removeClass("active");
    $("a." + path).addClass("active");

});

确保您的链接具有根据路径映射到的名称：

<a href="http://www.pro.com/" target="_self" class="home">Home</a>`