我想创建一个导航菜单，其功能与本网站上的菜单完全相同:http://www.rex-ny.com/
我宁愿只使用 HTML 和 CSS 来做，但我试了一整天都找不到解决方案。
当我选择一个菜单项时，我希望该菜单在页面加载后保持打开状态。这可能吗？
我还想让主菜单项可点击，以便它们加载新页面，并且在该页面加载时打开该菜单。
这是我目前所拥有的:
这里是 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/