Jquery 默认链接颜色保持'；它处于活动状态，直到鼠标单击另一个链接

当你进入网站时，我的默认链接颜色是活动的，但是当鼠标点击另一个链接并且新的当前页面现在处于活动状态时，我似乎无法让它取消活动状态。这是我的密码

JS

CSS

HTML

`

这就是你想要的吗

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

})

---

如果你点击一个链接，我猜它会打开一个新页面，所以每次加载页面时，活动链接都会被重置。因此，您可能要做的是检查每个链接是否位于当前页面上

因此，也许在php中：

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

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

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

`

如果只有HTML、CSS和JQuery，只需在每个页面的右侧链接上设置

活动的
类即可。您不需要使用JQuery删除类

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

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

例如：

家



其他第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>


是使用AJAX加载“新当前页面”还是刷新页面？您是否使用了“：visted”？@tracy，no，don know AJAX和@eric，noto澄清一下，是否要切换链接颜色？例如，如果单击“产品”，主页应为白色，产品应为黄色？这正是我所想的…谢谢，但我不知道PHP检查我的编辑，对于纯JS示例，我刚刚尝试了javescript代码，它删除了默认链接颜色购买鼠标单击新链接，但新链接不是活动的黄色。当单击新链接时，它删除了类很棒，但新链接需要是活动的颜色now@dyscool你一开始没有提到。我已经编辑了JSFIDLE和您的新请求。很抱歉，这正是需要的，谢谢。是的，当用户进入网站时，默认页面是黄色的活动链接，但是当用户点击另一个链接时，它的目标是自己，新的当前页面有黄色的活动链接和默认页面“主页”不再是黄色，而是像其他正常颜色的链接一样的白色。伙计们，我认为这是一个HTML问题，而不是JQuery问题。每次用户单击链接时，页面都会重新加载CSS，这是在“撤消”OP的JQuery。哇，我想我是那个感到困惑的人：s Lolit正在删除JQ代码，我试过这个密码，但是运气不好，只能靠它自己works@dyscool您是否尝试过将类
活动
放在每个页面导航上并删除JQuery？谢谢您，但我想我现在找到了我的答案如果我在上面的评论中给您的解决方案有效，您是否接受我的答案？
<a href="http://www.pro.com/" target="_self" class="<?php echo ($page === 'home' ?  'active' : ''; ?>">Home</a>

$(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>`

<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>

<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>

<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>