使用cookie删除和添加类到列表项 [英] Using a cookie to remove and add classes to list items

问题描述

我知道有这个问题的几个帖子，但没有一个是为我工作，所以我决定创建自己的线程。

I know there are a few posts on this problem but none of them are working for me so I decided to create my own thread.

这是我的列表：

<nav>
<!-- nav menu -->
    <ul class="clearfix">
        <li><a runat="server" href="Slideshow.aspx">Home</a></li>
        <li><a runat="server" class="active" href="AboutUs.aspx">About Us</a></li>
        <li><a runat="server" href="Contact.aspx">Contact Us</a></li>
    </ul>
</nav>

和CSS：

nav li a.active
{
    border-bottom: 3px solid #fd9625;
}

当用户单击列表项时，会显示底部边框。
我知道这应该改变服务器端使用cookies，但我不能得到任何解决方案为我工作。

When the user click on a list item, the bottom border is shown. I know this should be changed server-side using cookies but I can't get any solution to work for me.

这是我的jQuery到目前为止：

This is my jQuery so far:

$(document).ready(function () {    
    $('.clearfix').on('click', 'li a', function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    });
});

我不知道如何实现cookie。

I'm not sure how to implement the cookie.

推荐答案

以下是一个工作示例 - > http：/ /jsfiddle.net/k6r86/ 使用 cookies.js ：

Here is a working example -> http://jsfiddle.net/k6r86/ using cookies.js :

$(document).ready(function () {
    var index = Cookies.get('active');
    $('.clearfix').find('a').removeClass('active');
    $(".clearfix").find('a').eq(index).addClass('active');
    $('.clearfix').on('click', 'li a', function (e) {
        e.preventDefault();
        $('.clearfix').find('a').removeClass('active');
        $(this).addClass('active');
        Cookies.set('active', $('.clearfix a').index(this));
    });
});

看到小提琴，点击一下，然后再次更新小提琴，看到它存储了活动< li> 并将< li> 的类设置为活动重新加载。我已禁用链接，不是一个错误，只是为了测试。

See the fiddle, click around and then update the fiddle again and see it had stored the active <li> and sets that <li>'s class to active on reload. I have disabled the links, not an error, simply for test.

这篇关于使用cookie删除和添加类到列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！