jquery - 使用 cookie 删除和添加类到列表项

Question

我知道有一些关于这个问题的帖子，但没有一个对我有用，所以我决定创建自己的帖子。

这是我的 list :

<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;
}

当用户点击列表项时，会显示底部边框。我知道这应该使用 cookie 在服务器端进行更改，但我找不到任何适合我的解决方案。

到目前为止，这是我的 jQuery:

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

我不确定如何实现 cookie。

Answer 1

这是一个工作示例 -> http://jsfiddle.net/k6r86/ 使用 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));
    });
});

查看 fiddle ，点击周围然后再次更新 fiddle ，看到它已经存储了事件 <li>并设置 <li>类到active重新加载。我禁用了链接，不是错误，只是为了测试。