个人中心
gpt4 book ai didi

javascript - 重新加载时记住菜单状态

转载 作者：太空宇宙 更新时间：2023-11-04 14:38:53 25 4
gpt4 key购买 nike

我想创建一个导航菜单，其功能与本网站上的菜单完全相同: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

可以在每个页面的body中添加一个类，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
}

关于javascript - 重新加载时记住菜单状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18523876/

25 4 0
文章推荐： javascript - jQuery 边框图像(左上、右上、左下、右下)
文章推荐： java - 如何改变数组中元素的位置
文章推荐： java - 使用 JXL (JExcel) 更新 Excel 工作表导致文件大小为 0 KB
文章推荐： jquery - 使用 jQuery 验证插件验证 Bootstrap 表单时是否需要使用名称属性？