记住重新加载时的菜单状态

Remember menu state on reload

本文关键字：菜单 状态 加载 新加载      更新时间：2023-09-26

我想创建一个导航菜单，其功能与本网站上的功能完全相同：http://www.rex-ny.com/

我更喜欢只使用HTML和CSS，但我试了一整天都找不到解决方案。

  1. 当我选择一个菜单项时，我希望该菜单在页面加载后保持打开状态。这可能吗？

  2. 我还想让主菜单项可以点击，这样他们就可以加载一个新页面，当该页面加载时，该菜单是打开的。

以下是我目前所拥有的：

http://jsfiddle.net/MEL9d/

这是jquery：

$(document).ready(function () {
    $('#menu > li > a').click(function(){
        if ($(this).attr('class') != 'active'){
            $('#menu li ul').hide();
            $(this).next().toggle();
            $('#menu li a').removeClass('active');
            $(this).addClass('active');
        }
    });
});

和CSS：

#menu {
    float: left;
}
#menu li a {
    display: block;
}
#menu li ul {
    display: none;
}

您可以通过纯HTML和CSS来实现这一点。假设你有这样的结构：

- site
  + css
  + js
    index.html
    about.html

您可以在每个页面的正文中添加一个类，因此index用于index.php，about用于about.php:

<body class="about">

然后在您的菜单中，为与页面对应的每个项目添加一个id（如果您计划在多个地方使用菜单，则添加一个类）：

<ul id="menu">
  <li id="index" class="active"><a href="index.html"></li>
  <li id="about"><a href="about.html"></li>
</ul>

最后，使用CSS，您可以为每个页面专门设置菜单项的样式：

.index #index,
.about #about,
#menu .active {
  // styles for active item
}
相关文章：