使用 cookie 删除和添加类以列出项目

Question

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

这是我的清单：

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

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

Answer 2

jQuery Cookie 插件是一种方法：

https://github.com/carhartl/jquery-cookie

示例：设置 cookie

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

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

Answer 3

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

你在服务器端使用什么语言？

Answer 4

您可以使用jQuery.cookie() 库：

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

A demo with jQuery.cookie() library