Question

我有一个简单的JQuery片段，用于在锚标签/链接上切换类。我不知道的是，当点击其他链接时，如何进行类切换或添加/删除？示例：该类只能应用于单击的链接，并且一次不能在多个链接上。这就是我被困的地方。好吧，我不知道怎么做。

其次，如何使用JQuery Cookie保持当前链接处于活动状态。我已经下载了cookie扩展名。

这就是我所做的：

HTML：

<ul class="navbar">
 <li><a  href="#/">Link1</a></li>
 <li><a href="#/">Link2</a></li>
 <li><a  href="#/">Link3</a></li>
</ul>

CSS：

.activeLink{
    color: #930;
}

JQuery的：

$(document).ready(function() {
$('.navbar li a').click(function(){
    $(this).toggleClass('activeLink');
}); 
});

谢谢！

Answer 1

以下是使用事件传播的解决方案：

$(function() {

    var $activeLink,
        activeLinkHref = $.cookie('activeLinkHref'),
        activeClass = 'activeLink';

    $('.navbar').on('click', 'a', function() {
        $activeLink && $activeLink.removeClass(activeClass);
        $activeLink = $(this).addClass(activeClass);
        $.cookie('activeLinkHref', $activeLink.attr('href'));
    });

    // If a cookie is found, activate the related link.
    if (activeLinkHref) 
    $('.navbar a[href="' + activeLinkHref + '"]').click();

});

这是一个demo（没有cookie功能，因为JSFiddle缺乏支持）。

Answer 2

我是这样做的。这有点过于简单，但它可以在没有大量脑力劳动的情况下完成工作。

<ul class="navbar">
 <li><a  href="#/">Link1</a></li>
 <li><a href="#/">Link2</a></li>
 <li><a  href="#/">Link3</a></li>
</ul>

<script>
$(document).ready(function() {
$('.navbar li a').click(function(){
    $('.navbar li a').css('color', 'black');
    $(this).css('color', '#930');
}); 
});
</script>

添加/删除类并使用Cookie记住选择

2 个答案: