1

嗨，我有一个 jquery，用于在选择时更改菜单颜色

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

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

4

4 回答 4

2

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

于 2012-10-25T08:15:28.627 回答
0

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

于 2012-10-25T08:15:04.343 回答
0

你可以试试这个：

$(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-25T08:23:13.480 回答
0

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

您可以使用 cookie 或服务器端代码（会话）实现持久元素突出显示。

如果您使用jquery-cookie 插件，您可以像这样设置 cookie ：

 $("#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-25T08:24:29.833 回答