菜单页面状态

时间:2012-02-17 21:50:29

标签: php javascript jquery

所以,我有一个使用UL和LI的jquery菜单。我想要一个页面状态,以便通过在菜单项上保持悬停状态来向用户显示他所在的页面。

我创建了一个javascript文件,用于在用户点击链接时运行和读取数据。此函数使用从li

检索的文本数据设置cookie
function setCookie(name, value, days) {
    var expireDate = new Date()
    //set "expstring" to either future or past date, to set or delete cookie, respectively
    var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
    document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
    }

        function enact(what){                
             var value = $(what).text()                 
             setCookie("selected", value, 60)
        }

        function enactHome(){
             setCookie("selected", "Home", 60)
        }

        function enactLog(){
             setCookie("selected", "Log", 60)
        }</pre>

然后我有以下内容(读取cookie,如果它与文本相同,请设置样式):

<ul id="nav">
    <li onclick="enact(this);" <?php if($_COOKIE["selected"] == "Home"){ echo "class='navselected'"; }?> ><a href="index1.php">Home</a></li>

<li onclick="enact(this);" <?php if($_COOKIE["selected"] == "Student"){ echo "class='navselected'"; }?>><a href="#">Student</a>
                        <ul>
                            <li onclick="enact(this);"><a href="add_student.php">Add Student</a></li>
                            <li onclick="enact(this);"><a href="edit_student.php">Edit/Delete Student</a></li>                              
                        </ul>
                    </li>

<li onclick="enact(this);" <?php if($_COOKIE["selected"] == "User Log"){ echo "class='navselected'"; }?>><a href="log.php">User Log</a></li>    
</ul>                       

现在问题是学生链接在加载页面时起作用,并在css中设置背景的菜单状态。其他人确实设置了css,但页面必须再次刷新。因此,如果我单击“主页”,则会选择学生加载页面。刷新页面时,它会加载所选的主页。

我试图在Home和Log上使用enactHome()和encatLog(),但没有成功。我究竟做错了什么?请帮忙; /

谢谢, 弗朗西斯

1 个答案:

答案 0 :(得分:0)

您可以为每个页面的菜单项和正文提供唯一的id,并使用css进行操作。
我不明白为什么要使用cookie并解决所有麻烦。我可能会遗漏一些东西。

<强> HTML

<body id="page-about">
.
.
.
<ul>
    <li><a id="menu-about"></a></li>
</ul>

<强> CSS

#page-about #menu-about { background: red; }