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

jQuery Cookie插件是一种方法：

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

示例：设置cookie

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

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

Answer 2

这是一个工作示例 - ＆gt; 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 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
  });
});

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

4 个答案:

A demo with jQuery.cookie() library