Question

我很惊讶我很难找到这个问题的答案，因为这是一件很平常的事情。我正在使用tumblr网站，当用户点击导航中的不同链接时，我需要更改活动链接的颜色。我见过很多像这样的答案......

$(function() {
    var $sidebar = '#sidebar';

    $sidebar.on('click', '.item a', function(e) {           

        console.log('hit desktop');
        $('ul.nav li a').removeClass('active');
        $(this).addClass('active');
 });

//css
.active { color: black;}

因此，此函数会被调用并暂时添加到DOM中，但一旦页面刷新到新链接就会被删除。但假设您在单击导航链接时未使用某种类型的手风琴，则会将用户重定向到该页面。因此，即使在页面刷新到新的函数时调用该函数，该函数也基本上被擦除。我可以使用cookie或if语句来比较href吗？这可以在客户端完成吗？

Answer 1

只需使用CSS：

a{
    color:blue;
}
a:hover{
    color:green;
}
a:active{
    color:orange;
}
a:visited{
    color:red;
}

:active是指用户点击链接上的点击或者正在调用与该链接相关的功能。

:visited是指用户点击它并完成后

Answer 2

我不完全确定你的意思但是如果你想改变当前导航按钮的活动状态并通过jquery从所有其他状态中删除状态，那么你可以这样做。

$('#sidebar li a').click(function() {
    $(this).closest("li").addClass('active').siblings().removeClass('active');
    return(false);
});

，HTML将是

<div id="sidebar">
    <ul>
        <li><a href="#">First Item</a></li>
        <li><a href="#">Second Item</a></li>
        <li><a href="#">Third Item</a></li>
    </ul>
</div>

这实际上会将活动类添加到当前列表项中，并将其从所有其他同级项中删除。

如何在页面重新加载时更改导航中的：活动链接的颜色？

2 个答案: