jQuery的CSS选择的菜单问题

嗨选择当我有改变菜单颜色的jQueryjQuery的CSS选择的菜单问题

.selected{ 
    background-color: red; 
}

$("#nav-container>li").click(function(){ 
    $(this).addClass('selected') 
     .siblings() 
     .removeClass('selected'); 
});

的HTML如下：

<ul id="nav-container"> 
    <li id="welcome"> 
     <a href="/" >Welcome</a> 
    </li> 

    <li id="find"> 
     <a href="/find">Find</a> 
    </li> 

    <li id="talk"> 
     <a href="/talk">Talk</a> 
    </li> 

    <li id="events"> 
     <a href="/event">Events</a> 
    </li> 
</ul>

颜色变化发生，但当页面处于新页面或页面时，将重新加载到新页面，不再选择颜色。我还没有添加什么？我在这里错过了什么吗？

来源

2012-10-25 d3bug3r

您需要一些方法来存储跨页请求的当前选定项目。你可以通过cookies来做到这一点，甚至可以在页面中隐藏一个可以读取值的字段。 –

换句话说，你缺少的是页面生命周期的基本理解。 –

在服务器端做这个选择 –

请记住，addClass的效果只对当前文档有效。您可以使用SessionID和PHP

来源

2012-10-25 08:15:04

jQuery不知道在页面重新加载后您选择了哪一个，您必须通过服务器端代码（php）或页面加载设置selected类检查哪个页面你在jQuery中，并在元素上设置selected类。

来源

2012-10-25 08:15:28 Andy

你可以试试这个：

$(function(){ 
    var $ul = $("#nav-container"); 
    var path = window.location.pathname; 
    var $a = $('a[href="'+path+'"]', $ul); 
    if ($a && $a.length) { 
     var $li = $a.parent(); 
     $li.addClass('selected'); 
    } 
});

并删除你的点击功能。

来源

2012-10-25 08:23:13

这是正常行为。 Javascript上下文特定于一个页面。如果您重新加载页面，即使某些HTML标记相同，它的Javascript设置属性也将被重置。

您可以使用Cookie或服务器端代码（会话）实现持久性元素高亮显示。

您可以设置cookie like this，如果使用jquery-cookie plugin：

$("#nav-container>li").click(function(){ 
     $(this).addClass('selected') 
     .siblings() 
     .removeClass('selected'); 
     $.cookie("selected", $(this).attr('id'), { path: '/' }) 
}); 

$(document).ready(function() { 
     $("#" + $.cookie("selected")).addClass('selected') 
});

注：没有测试此代码，但它应该工作。当然，用户需要启用cookie才能使用它。

来源

2012-10-25 08:24:29 pistache

jQuery的CSS选择的菜单问题

回答

相关问题