阅读量:0
要实现不用Cookie的仿刷新二级高亮菜单，可以使用JavaScript和CSS。以下是一个简单的示例：，，HTML代码：，``
html，，，，，，无Cookie仿刷新二级高亮菜单，，，，，一级菜单1，，二级菜单1-1，二级菜单1-2，，，一级菜单2，，二级菜单2-1，二级菜单2-2，，，，，，，`，，CSS代码（style.css）：，`css，.menu {， list-style: none;， padding: 0;，}，，.menu-item {， position: relative;， cursor: pointer;，}，，.submenu {， display: none;， position: absolute;， top: 100%;， left: 0;， list-style: none;， padding: 0;，}，，.menu-item:hover .submenu {， display: block;，}，，.submenu-item:hover {， background-color: #ccc;，}，`，，JavaScript代码（script.js）：，`javascript，document.addEventListener('DOMContentLoaded', function() {， const menuItems = document.querySelectorAll('.menu-item');， const submenuItems = document.querySelectorAll('.submenu-item');，， menuItems.forEach(function(menuItem) {， menuItem.addEventListener('click', function() {， menuItems.forEach(function(item) {， item.classList.remove('active');， });， menuItem.classList.add('active');， });， });，， submenuItems.forEach(function(submenuItem) {， submenuItem.addEventListener('click', function() {， submenuItems.forEach(function(item) {， item.classList.remove('active');， });， submenuItem.classList.add('active');， });， });，});，``不用Cookie的仿刷新二级高亮菜单实现方法
1. 使用纯CSS和HTML实现二级菜单高亮
1.1 创建HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二级菜单</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav> <ul class="menu"> <li><a href="#section1">一级菜单1</a> <ul class="submenu"> <li><a href="#section1_1">二级菜单1-1</a></li> <li><a href="#section1_2">二级菜单1-2</a></li> </ul> </li> <li><a href="#section2">一级菜单2</a> <ul class="submenu"> <li><a href="#section2_1">二级菜单2-1</a></li> <li><a href="#section2_2">二级菜单2-2</a></li> </ul> </li> </ul> </nav> <section id="section1"> <h2>一级菜单1内容</h2> <p>这里是一级菜单1的内容。</p> <section id="section1_1"> <h3>二级菜单1-1内容</h3> <p>这里是二级菜单1-1的内容。</p> </section> <section id="section1_2"> <h3>二级菜单1-2内容</h3> <p>这里是二级菜单1-2的内容。</p> </section> </section> <section id="section2"> <h2>一级菜单2内容</h2> <p>这里是一级菜单2的内容。</p> <section id="section2_1"> <h3>二级菜单2-1内容</h3> <p>这里是二级菜单2-1的内容。</p> </section> <section id="section2_2"> <h3>二级菜单2-2内容</h3> <p>这里是二级菜单2-2的内容。</p> </section> </section> </body> </html>
1.2 编写CSS样式
/* styles.css */ body { font-family: Arial, sans-serif; } nav { background-color: #333; } .menu { list-style: none; padding: 0; margin: 0; } .menu > li { position: relative; display: inline-block; } .menu a { display: block; color: white; text-decoration: none; padding: 10px 20px; } .menu a:hover { background-color: #555; } .submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; list-style: none; padding: 0; margin: 0; background-color: #444; } .submenu li { position: relative; } .submenu a { color: white; padding: 8px 16px; } .submenu a:hover { background-color: #555; } /* 默认隐藏所有子菜单 */ .submenu { display: none; } /* 当鼠标悬停在父元素上时显示子菜单 */ .menu > li:hover .submenu { display: block; }2. 使用JavaScript实现二级菜单高亮（不使用Cookie）
2.1 添加JavaScript代码
在HTML文件的<head>标签内添加以下JavaScript代码：
<script> document.addEventListener('DOMContentLoaded', function() { var menuItems = document.querySelectorAll('.menu > li > a'); var submenus = document.querySelectorAll('.submenu'); menuItems.forEach(function(item) { item.addEventListener('click', function(event) { event.preventDefault(); var targetId = this.getAttribute('href').substring(1); var targetElement = document.getElementById(targetId); targetElement.scrollIntoView({ behavior: 'smooth' }); }); }); submenus.forEach(function(submenu) { var links = submenu.querySelectorAll('a'); links.forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); var targetId = this.getAttribute('href').substring(1); var targetElement = document.getElementById(targetId); targetElement.scrollIntoView({ behavior: 'smooth' }); }); }); }); }); </script>3. 相关问题与解答
问题1：为什么需要使用JavaScript实现二级菜单高亮？
答：因为仅使用CSS无法实现点击二级菜单后页面平滑滚动到对应内容区域的效果，而JavaScript可以实现这一功能，使用户体验更佳。
问题2：为什么不使用Cookie实现二级菜单高亮？
答：使用Cookie存储用户的操作记录可能会导致隐私问题，而且在某些情况下可能不被允许，使用JavaScript可以实现同样的效果，无需依赖Cookie。
小伙伴们，上文介绍了“不用Cookie的仿刷新二级高亮菜单”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
