返回

一文搞定！原生JS实现Tab导航栏切换案例，手把手教你！

前端

使用原生 JavaScript 构建美观且实用的 Tab 导航栏

在现代网络开发中，Tab 导航栏已成为用户界面设计中必不可少的一部分。通过允许用户轻松地在不同的内容区域之间切换，Tab 导航栏提供了出色的用户体验。虽然可以使用诸如 Bootstrap 或 jQuery 等库来实现 Tab 导航栏，但使用原生 JavaScript 可以让你对最终产品拥有完全控制权，同时避免不必要的依赖项。

步骤一：HTML 结构

首先，创建一个包含以下 HTML 代码的 HTML 文件：

<div id="tabs">
  <ul>
    <li><a href="#tab1">标签 1</a></li>
    <li><a href="#tab2">标签 2</a></li>
    <li><a href="#tab3">标签 3</a></li>
  </ul>
  <div id="tab-content">
    <div id="tab1">内容 1</div>
    <div id="tab2">内容 2</div>
    <div id="tab3">内容 3</div>
  </div>
</div>

这个 HTML 结构创建了一个带有三个标签的 Tab 导航栏和三个相应的内容区域。

步骤二：CSS 样式

接下来，创建一个 CSS 文件并添加以下样式：

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
}

/* Tab 导航栏 */
#tabs {
  width: 100%;
  background-color: #f5f5f5;
}

#tabs ul {
  list-style-type: none;
  display: flex;
}

#tabs li {
  padding: 10px;
}

#tabs a {
  color: #000;
  text-decoration: none;
}

#tabs a:hover {
  color: #666;
}

#tabs a.active {
  color: #fff;
  background-color: #000;
}

/* Tab 内容 */
#tab-content {
  padding: 20px;
}

#tab1, #tab2, #tab3 {
  display: none;
}

#tab1.active, #tab2.active, #tab3.active {
  display: block;
}

这些样式提供了基本的视觉样式，包括背景颜色、文本颜色以及活动状态的突出显示。

步骤三：JavaScript 脚本

最后，创建一个 JavaScript 文件并添加以下脚本：

const tabs = document.querySelectorAll("#tabs ul li");
const tabContent = document.querySelectorAll("#tab-content div");

tabs.forEach((tab, index) => {
  tab.addEventListener("click", () => {
    tabs.forEach((tab) => {
      tab.classList.remove("active");
    });

    tabContent.forEach((content) => {
      content.classList.remove("active");
    });

    tab.classList.add("active");
    tabContent[index].classList.add("active");
  });
});

这段 JavaScript 脚本使用事件侦听器来监听 Tab 标签的点击事件。当用户单击一个标签时，它会移除所有其他标签和内容区域的活动状态，并激活被点击的标签和相应的内容区域。

代码示例

以下是一个完整的代码示例，用于使用原生 JavaScript 实现 Tab 导航栏：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tab1">标签 1</a></li>
      <li><a href="#tab2">标签 2</a></li>
      <li><a href="#tab3">标签 3</a></li>
    </ul>
    <div id="tab-content">
      <div id="tab1">内容 1</div>
      <div id="tab2">内容 2</div>
      <div id="tab3">内容 3</div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
}

/* Tab 导航栏 */
#tabs {
  width: 100%;
  background-color: #f5f5f5;
}

#tabs ul {
  list-style-type: none;
  display: flex;
}

#tabs li {
  padding: 10px;
}

#tabs a {
  color: #000;
  text-decoration: none;
}

#tabs a:hover {
  color: #666;
}

#tabs a.active {
  color: #fff;
  background-color: #000;
}

/* Tab 内容 */
#tab-content {
  padding: 20px;
}

#tab1, #tab2, #tab3 {
  display: none;
}

#tab1.active, #tab2.active, #tab3.active {
  display: block;
}

const tabs = document.querySelectorAll("#tabs ul li");
const tabContent = document.querySelectorAll("#tab-content div");

tabs.forEach((tab, index) => {
  tab.addEventListener("click", () => {
    tabs.forEach((tab) => {
      tab.classList.remove("active");
    });

    tabContent.forEach((content) => {
      content.classList.remove("active");
    });

    tab.classList.add("active");
    tabContent[index].classList.add("active");
  });
});

结论

使用原生 JavaScript 实现 Tab 导航栏是一个相对简单的过程，通过遵循本教程中的步骤，你可以轻松创建出美观且实用的 Tab 导航栏，从而增强你的网站的用户体验。

常见问题解答

  1. 可以使用 CSS 样式进一步自定义 Tab 导航栏吗？
    是的，可以根据需要使用 CSS 进一步自定义 Tab 导航栏的外观和感觉。

  2. Tab 导航栏是否可以响应不同的屏幕尺寸？
    是的，可以使用媒体查询等技术来创建响应式 Tab 导航栏。

  3. 可以将 Tab 导航栏集成到现有的网站吗？
    是的，可以通过修改 HTML、CSS 和 JavaScript 代码来将 Tab 导航栏集成到现有的网站。

  4. 是否可以使用 JavaScript 框架，例如 React 或 Vue.js，来构建 Tab 导航栏？
    是的，可以使用 JavaScript 框架来构建 Tab 导航栏，但这可能需要额外的学习曲线和依赖项。

  5. 实现 Tab 导航栏时还有什么需要考虑的？
    除了视觉设计和响应能力外，还需要考虑键盘导航、可访问性和性能优化等因素。