添加/删除类并使用Cookie记住所选内容

Add/Remove classes and using Cookie to remember selection

本文关键字：Cookie 删除 添加      更新时间：2023-09-26

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

谢谢！！

下面是一个使用事件传播的解决方案：

$(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缺乏支持）。

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

<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>
相关文章：