创建底部导航栏反应原生 - Javascript

在移动应用或网站中，底部导航栏是一种非常常见的设计模式。它在用户界面中可以提供快速导航和指示当前页面的位置。在本文中，我们将讨论如何使用 Javascript 和原生 HTML/CSS 创建底部导航栏。

HTML 结构

首先，让我们创建一个基础的 HTML 结构。我们将创建一个包含 4 个导航链接的底部导航栏：

```html
<footer>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Discover</a></li>
      <li><a href="#">Search</a></li>
      <li><a href="#">Profile</a></li>
    </ul>
  </nav>
</footer>

CSS 样式

现在，我们需要给导航栏添加样式。我们将创建一个基础的 CSS 样式来定义导航栏的外观和行为：

```css
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-top: 1px solid #ccc;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 700px;
  display: flex;
}

nav li {
  flex: 1;
}

nav li a {
  display: block;
  text-align: center;
  padding: 10px 0;
  color: #777;
  text-decoration: none;
  transition: all 0.3s ease;
}

nav li a:hover {
  color: #111;
}

Javascript 代码

现在，我们需要使用 Javascript 为导航栏添加交互行为。我们将使用原生 Javascript 来监听点击事件并将活动类应用于选定的导航链接。

```js
// 获取导航链接
const navLinks = document.querySelectorAll("nav ul li a");

// 添加“click”事件监听器
navLinks.forEach((link) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();

    // 删除所有已激活的导航链接
    const activeLinks = document.querySelectorAll(".active");
    activeLinks.forEach((activeLink) =>
      activeLink.classList.remove("active")
    );

    // 将活动类应用于选定的导航链接
    e.target.classList.add("active");
  });
});

结论

使用 Javascript 和原生 HTML/CSS 创建底部导航栏是一个简单而有效的方法，可以为用户提供更好的导航体验。通过这个教程，您可以学习如何实现基本的导航栏，并了解如何使用 Javascript 为其添加交互性。现在，您可以根据需要进一步扩展并美化导航栏。