0

我有这个简单的 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;
}

查询：

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

谢谢！！

4

2 回答 2

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();

});​

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

于 2012-08-05T23:03:16.240 回答
0

这是我的做法。这有点简单，但它可以在没有太多大脑压力的情况下完成工作。

<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>
于 2012-08-05T22:33:50.473 回答