使用 JavaScript 创建带聚光灯指示器的底部导航栏

    使用 JavaScript 代码创建了一个具有指示器功能的底部导航栏。导航栏添加聚光灯是多么炫酷的效果！它使用事件监听器来突出显示活动图标，为导航提供视觉反馈，同时支持文字、颜色及位置的自定义。moveLight 函数定位指示器，而 activeLink 则管理图标的活动状态。可以将此代码用于需要时尚酷炫底部导航栏的网络应用程序，在移动端网站中使用效果更佳！

如何用 Javascript 创建带指示器的底部导航栏

1.首先，在 HTML 文档的 head 标记中添加以下 CDN 链接，加载 BoxIcons CSS。

<link href='https://cdn.staticfile.net/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 "部分的变量来定制图标的颜色。通过这一步骤，您可以个性化导航栏，使其与应用程序的主题相匹配。