css实现导航栏居中显示效果 css实现导航栏滑动效果

本教程旨在解决侧边导航菜单中勾选同时激活显示自己的问题。通过JavaScript动态管理CSS类，确保在任一点击菜单项时，仅当前被选中的菜单项显示红色激活边框，而其他所有菜单项的激活状态被清除，从而实现在单一的选中效果，提升用户体验。侧边导航基础结构

在构建交互侧边导航时，我们通常会使用html来定义菜单结构，css来美化其外观和激活定义状态，以及javascript来处理用户交互逻辑。

HTML结构

以下HTML代码展示了一个典型的侧边导航菜单结构，其中包含多个main_list_item元素，每个元素代表一个主项菜单。

lt；htmlgt；lt；headgt；lt；meta charset=quot；utf-8quot；/gt；lt；meta name=quot；viewportquot；content=quot；width=device-width，initial-scale=1.0quot；/gt；lt；meta http-equiv=quot；X-UA-Compatiblequot；content=quot；IE=edgequot；/gt；lt；titlegt；侧边栏lt；/titlegt；lt；/headgt；lt；bodygt；lt；nav id=quot；nav_menu_query_offquot；gt；lt；menu id=quot；main_menuquot；gt；lt；li class=quot；main_list_itemquot；gt；lt；div class=quot；menu_headerquot；gt；menu onelt；/divgt；lt；div class=quot；menu_bodyquot；gt；lt；菜单class="；sub_menu"；gt；lt；/menugt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；/divgt； lt；/ligt； lt；li class="；main_list_item"；gt； lt；div class="；menu_header"；gt；菜单二lt；/divgt； lt；div class="；menu_body"；gt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；/divgt； lt；/ligt； lt；li class="；main_list_item"；gt； lt；div class=quot；menu_headerquot；gt；菜单三lt；/divgt； lt；div class=quot；menu_bodyquot；gt； lt；菜单 class=quot；sub_menuquot；gt；lt；/menugt； lt；菜单 class=quot；sub_menuquot；gt；lt；/menugt； lt；菜单 class=quot；sub_menuquot；gt；lt；/menugt； lt；菜单 class=quot；sub_menuquot；gt；lt；/menugt； lt；/

divgt； lt；/ligt； lt；li class=quot；main_list_itemquot；gt； lt；div class=quot；menu_headerquot；gt；菜单 fourlt；/divgt； lt；div class=quot；menu_bodyquot；gt； lt；菜单 class=quot；sub_menuquot；gt；lt；/menugt； lt；菜单class=quot；sub_menuquot；gt；lt；/menugt；lt；menu class=quot；sub_menuquot；gt；lt；/menugt；lt；/divgt；lt；/ligt；lt；/menugt；lt；/navgt；lt；/bodygt；lt；/htmlgt；登录后复制

CSS样式

CSS用于定义导航布局和窗体样式。其中，.active 类是实现激活效果的关键，它为菜单项底部添加了一个红色的边框。

立即学习“Java免费学习笔记（深入）”；* { margin： 0； padding： 0； box-sizing： border-box； text-decoration： none； list-style： none；}body { font-family： 'Ebrima'； background-color： #444444；}nav#nav_menu_query_off {position：固定； 顶部： 0； 左侧： 0； 宽度： 200px； 高度： 100vh； 背景颜色： #222222； 溢出： auto； z-index： 2； 填充： 20px 0 20px 20px；}nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header { text-transform： 大写；底部填充： 10px；}nav#nav_menu_query_off 菜单 li { color： #f0f0f0；}nav#nav_menu_query_off menu#main_menu li.main_list_item：not(：first-child) { padding-top： 20px；}.active { border-bottom： 1px 纯红色；}nav：：-webkit-scrollbar { display： none；}登录后复制原始JavaScript逻辑分析

最初的JavaScript代码旨在为菜单中的每一项添加点击事件监听器，并在点击时切换其活动类。

const cards = document.querySelectorAll('.main_list_item')；cards.forEach((card) =gt； { const num_btn = card.querySelector('.menu_header') num_btn.addEventListener('click'， () =gt； { if (!card.classList.contains('active')) { card.classList.add('active')； } else { card.classList.remove('active')； } })}) 登录后复制

可能出现代码的问题，当一个菜单项被点击时，它会根据自身当前是否含有活动类来添加是还是删除该类。并不会检查或修改其他菜单项的点击状态。这意味着，如果用户连续使用不同的菜单项，每个被点击的菜单项都会被赋予活动状态 类，从而导致多个菜单项同时显示红色边框，这与我们期望的“单选”效果不符。实现单选激活的解决方案

实现一次只有一个菜单项被激活的效果，核心思想是在激活菜单项，首先清除当前所有其他菜单项的激活状态。这可以通过在添加活动类之前，查看所有菜单项并删除它们的活动类来实现。

以下是修改后的JavaScript代码：const cards = document.querySelectorAll('.main_list_item')；cards.forEach((card) =gt； { const num_btn = card.querySelector('.menu_header') num_btn.addEventListener('click'， () =gt； { if (!card.classList.contains('active')) { // 在添加当前项的活动类之前，先清除所有项的活动类cards.forEach((item) =gt； item.classList.remove('active'))； card.classList.add('active')； } else { // 如果当前项已激活并再次点击，则删除active类（取消激活） card.classList.remove('active')； } })}) 登录后复制登录后复制

代码解析：const cards = document.querySelectorAll('.main_list_item')；：这一行获取了具有main_list_item的所有内容类的DOM元素，即所有的主菜单项。cards.forEach((card) =gt； { ... })；：为菜单项每一项添加一个点击事件监听器。num_btn.addEventListener('click'， () =gt； { ... })；：当menu_header（菜单项的标题部分）被点击时触发回调函数。

if (!card.classList.contains('active')) { ... }： 判断当前点击的菜单项是否已经有激活状态。如果不包含 active 类（即未激活）：cards.forEach((item) =gt； item.classList.remove('active'))；：这是关键的修改点。它再次遍历所有的 main_list_item 元素，并移去强制它们下面的 active这样保证了在新的菜单项被激活，所有旧的激活状态都被清除。card.classList.add('active')；：然后，将活动类添加到当前被点击的菜单项上，从而显示红色对应。else { card.classList.remove('active')； }：如果当前之前已经包含活动类即（已激活），再次点击时则移除活动类，实现取消激活的效果。

完整代码示例

为了方便理解和实践，以下是包含HTML、CSS和修改后JavaScript的完整代码：

HTML (index.html)lt；!DOCTYPE htmlgt；lt；htmlgt；lt；headgt； lt；meta charset=quot；utf-8quot； /gt； lt；meta name=quot；viewportquot； content=quot；width=device-width，initial-scale=1.0quot； /gt； lt；meta http-equiv=quot；X-UA-Compatiblequot； content=quot；IE=edgequot； /gt； lt；titlegt；side navlt；/titlegt； lt；link rel=quot；stylesheetquot； href=quot；style.cssquot；gt； lt；!-- 引入 CSS 文件 --gt；lt；/headgt；lt；bodygt； lt；nav id=quot；nav_menu_query_offquot；gt；lt；菜单id="；main_menu"；gt； lt；li class="；main_list_item"；gt； lt；div class="；menu_header"；gt；菜单一lt；/divgt； lt；div class="；menu_body"；gt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；/divgt； lt；/ligt； lt；li class="；main_list_item"；gt； lt；div class="；menu_header"；gt；菜单二lt；/divgt； lt；div class="；menu_body"；gt； lt；菜单 class="；sub_menu"；gt；lt；/menugt； lt；菜单类=“；子菜单”；gt；lt；/menugt； lt；菜单类=“；子菜单”；gt；lt；/menugt； lt；/divgt； lt；/ligt； lt；li类=“；main_list_item”；gt； lt；div类=“；menu_header”；gt；菜单三lt；/divgt； lt；div类=“；menu_body”；g

t； lt；菜单类=“；子菜单”；gt；lt；/menugt； lt；菜单类=“；子菜单”；gt；lt；/menugt； lt；菜单类=“；子菜单”；gt；lt；/menugt； lt；/divgt； lt；/ligt； lt；li类=“；main_list_item”；gt； lt；div类=“；menu_header”；gt；菜单四lt；/divgt； lt；div类=“；menu_body”；gt； lt；菜单类=“；子菜单”；gt；lt；/menugt； lt；菜单类=“；子菜单”；gt；lt；/menugt； lt；菜单类=“；子菜单”；gt；lt；/menugt； lt；菜单类=“；子菜单”；gt；lt；/menugt； lt；/divgt； lt；/ligt； lt；/menugt； lt；/navgt； lt；script src=quot；script.jsquot；gt；lt；/scriptgt； lt；!-- 引入JavaScript文件 --gt；lt；/bodygt；lt；/htmlgt；登录后复制

CSS (style.css)* { margin： 0； padding： 0； box-sizing： border-box； text-decoration： none； list-style： none；}body { font-family： 'Ebrima'； background-color： #444444；}nav#nav_menu_query_off {position： Fixed； top： 0； left： 0； width： 200px； height： 100vh； background-color： #222222； overflow： auto； z-index： 2； padding： 20px 0 20px 20px；}nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header { text-transform： 大写； padding-bottom： 10px； cursor： 指针； /* 添加光标指示可点击 */}nav#nav_menu_query_off menu li { color： #f0f0f0；}nav#nav_menu_query_off menu#main_menu li.main_list_item：not(：first-child) { padding-top： 20px；}.active { border-bottom： 1px solid red；}nav：：-we

bkit-scrollbar { display： none；}登录后复制

JavaScript (script.js)const cards = document.querySelectorAll('.main_list_item')；cards.forEach((card) =gt； { const num_btn = card.querySelector('.menu_header') num_btn.addEventListener('click'， () =gt； { if (!card.classList.contains('active')) { // 在添加当前项的活动类之前，先清除所有项的活动类 cards.forEach((item) =gt； item.classList.remove('active'))； card.classList.add('active')； } else { // 如果当前项已激活且再次点击，删除活动类（取消激活） card.classList.remove('active')； } })})登录后复制登录后复制注意事项与优化性能考量： 对于大量菜单项的复杂导航，每次点击都遍历所有元素并包含删除类可能会带来一些的耗时。但在最常见的侧边导航场景中（几十个或几个菜单项），这种耗时通常可以忽略不计。事件委托：对于动态生成或数量庞大的列表项，使用事件委托可以进一步优化性能。即只在父元素上添加一个事件监听器，通过事件冒来判断是哪个子元素被点击。终止JavaScript逻辑复杂一些。可维护性：通过CSS类来管理元素的激活状态是一种推荐的做法，将样式和行为分离，使代码更容易理解和维护。用户体验：确保点击区域足够大，并提供视觉反馈（如光标：指针）以提升用户体验。总结

本教程详细介绍了如何通过修改JavaScript逻辑，实现侧边导航菜单的单选激活效果。核心在于利用querySelectorAll 获取所有菜单项，并在每次点击激活新项，迭代清除所有旧的激活状态。这种模式广泛评估各种UI，确保了界面的清晰性和用户操作的预期性。行为简单的几行代码修改，我们成功排除多选行为为修改符合用户习惯的单选。

以上就是实现侧边导航单选激活效果：JavaScript之前与CSS实践的详细，内容更多请关注乐哥常识网其他文章相关！