使用 JavaScript 代码创建了一个具有指示器功能的底部导航栏。导航栏添加聚光灯是多么炫酷的效果！它使用事件监听器来突出显示活动图标，为导航提供视觉反馈，同时支持文字、颜色及位置的自定义。moveLight 函数定位指示器，而 activeLink 则管理图标的活动状态。可以将此代码用于需要时尚酷炫底部导航栏的网络应用程序，在移动端网站中使用效果更佳！
如何用 Javascript 创建带指示器的底部导航栏
1.首先，在 HTML 文档的 head 标记中添加以下 CDN 链接，加载 BoxIcons CSS。
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
2.设置 HTML 文件。包括导航栏的必要结构。
/*这里仅展示部分示例代码，下载后查看完整版代码*/ <nav class="nav"> <ul class="nav__links"> <li class="nav__link active"> <a href="#"><i class='bx bx-home-alt-2'></i></a> </li> <li class="nav__link"> <a href="#"><i class='bx bx-heart' ></i></a> </li> <li class="nav__link"> <a href="#"><i class='bx bx-plus-circle' ></i></a> </li> <li class="nav__link"> <a href="#"><i class='bx bx-user' ></i></a> </li> <li class="nav__link"> <a href="#"><i class='bx bx-bell' ></i></a> </li> <div class="nav__light"></div> </ul> </nav>
3.创建 CSS 文件（styles.css），并为导航栏元素设置样式，以实现所需的外观。您可以修改颜色、大小和位置，以匹配您的设计。
/*这里仅展示部分示例代码，下载后查看完整版代码*/
/* ------------ VARIABLES ------------ */
:root{
/* COLORS */
--tab-color: #191919;
--white-color: #fff;
--home-icon-color: #00f7ff;
--heart-icon-color: #ff0000;
--plus-icon-color: #adff2f;
--user-icon-color: #ee82ee;
--bell-icon-color: #ffff00;
}
/* ------------ BASE ------------ */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}4.最后，在 JavaScript 文件（script.js）中实现导航栏功能的逻辑。
/*这里仅展示部分示例代码，下载后查看完整版代码*/
const links = document.querySelectorAll('.nav__link');
const light = document.querySelector('.nav__light');如果需要，可以通过调整 CSS 中":root "部分的变量来定制图标的颜色。通过这一步骤，您可以个性化导航栏，使其与应用程序的主题相匹配。
