Jquery 使用cookie删除类并将其添加到列表项

我知道有一些关于这个问题的帖子，但是没有一篇适合我，所以我决定创建自己的帖子

以下是我的清单：

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

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

这是迄今为止我的jQuery：

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

---

我不知道如何实现cookie。

您需要一些服务器端语言，如ruby或php来实现这一点。当用户单击链接时，您必须对服务器进行ajax调用，并设置cookie。当用户重新加载页面时，您必须呈现HTML并决定，如果设置了cookie，则添加适当的css类，否则不添加任何内容

---

服务器端使用什么语言？

jQuery Cookie插件是一种方法：

示例：设置cookie

$.cookie('cookie_name', 'value'); // to set

$.cookie('cookie_name'); // to get

您可以使用以下库执行此操作：

---

下面是一个工作示例->，使用：

---

查看小提琴，单击周围，然后再次更新小提琴，查看它已存储活动的

，并在重新加载时将
的类设置为活动的
。我已禁用链接，这不是一个错误，只是为了测试。
您打算在cookie？cookie中保存什么？首先，您实际上可以在客户端读/写cookie。但是-我不确定这是你想要的。使用cookie的唯一可能原因是保存页面状态-因此，网站的某些部分将始终以相同的顺序显示。我想使用cookie设置所单击链接的CSS（服务器端）。饼干的内容我不知道。我希望其他人能通知我。谢谢你的回复！我理解你的意思，但我不知道如何实现这个方法。我目前正在服务器端使用JavaScript。这不起作用，因为每次单击链接时都会重新加载页面，因此页面及其所有内容都会重置为其默认值。@PierreNortje是的，我同意您可以按照我建议的更新代码对cookie执行此操作。搞定了！：）虽然当我点击我的链接时，我没有被重定向。我刚刚删除了
e.preventDefault（）现在它100%工作。感谢所有帮助过我的人！有没有办法将“主页”链接设置为在页面加载时预先启用CSS，然后让页面继续提供与小提琴中相同的效果？你的意思是，如果活动未设置为cookie，则将“主页”设置为活动？在
var index=Cookie.get…
->
index=（typeof index='number'）之后添加此行？指数：0见小提琴->是！：）就这样！谢谢你好，抱歉打开一条旧线。但是如何更改它，使其记住所有已单击的链接，然后添加“活动”类。我想在所有以前被点击的链接上的样式！
$.cookie('cookie_name', 'value'); // to set

$.cookie('cookie_name'); // to get

$(document).ready(function () {
  var activePage = $.cookie('page'); // read the value
  if(activePage.length > 0 && activePage != undefined){ // check if it holds any value
    $('.active').removeClass('active'); // remove the existing active class
    $('.clearfix').find('[href*="'+ activePage  +'"]').addClass('active');
  }// add the active class to the anchor which holds the href value
  $('.clearfix').on('click', 'li a', function (e) {
      $('.active').removeClass('active');
      $(this).addClass('active');
      $.cookie('page', $(this).attr('href').split('.')[0]); // save the href in cookie
  });
});

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