Html 选项卡 - Html (1)

📌 相关文章

📜 Html 选项卡 - Html (1)

📅 最后修改于: 2023-12-03 15:31:18.122000 🧑 作者: Mango

Html 选项卡 - Html

HTML 选项卡是一个非常有用的功能，可以帮助我们在一个页面中同时显示多个内容或者内容选项，增加页面的交互性和可读性。运用 HTML 选项卡可以在同一页面内展现不同内容和选项卡，通过一定的代码操作和CSS样式设置，实现用户点击选项卡，自动切换到对应内容的效果。

核心代码

下面是展示 HTML 选项卡 的核心代码片段，代码行数较少，实现起来也较简单。

html代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Html 选项卡</title>
    <link rel="stylesheet" href="./tab.css">
    <script src="./tab.js"></script>
  </head>
  <body>
    <div class="tab">
      <div class="tab-header">
        <ul>
          <li class="active"><a href="#tab1">选项卡一</a></li>
          <li><a href="#tab2">选项卡二</a></li>
          <li><a href="#tab3">选项卡三</a></li>
        </ul>
      </div>
      <div class="tab-content">
        <div class="active" id="tab1">选项卡一的内容</div>
        <div id="tab2">选项卡二的内容</div>
        <div id="tab3">选项卡三的内容</div>
      </div>
    </div>
  </body>
</html>

CSS代码

.tab .tab-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab .tab-header ul li {
  float: left;
}

.tab .tab-header ul li.active a {
  background-color: #ccc;
}

.tab .tab-content div {
  display: none;
}

.tab .tab-content div.active {
  display: block;
}

JS代码

const tabHeader = document.querySelector('.tab-header');
const tabHeaderLi = tabHeader.querySelectorAll('li');
const tabContent = document.querySelector('.tab-content').children;

for (let i = 0; i < tabHeaderLi.length; i++) {
  tabHeaderLi[i].addEventListener('click', function() {
    for (let j = 0; j < tabHeaderLi.length; j++) {
      tabHeaderLi[j].className = '';
      tabContent[j].className = '';
    }
    this.className = 'active';
    tabContent[i].className = 'active';
  });
}

代码说明

我们先来看看HTML结构：

<div class="tab">
  <div class="tab-header">
    <ul>
      <li class="active"><a href="#tab1">选项卡一</a></li>
      <li><a href="#tab2">选项卡二</a></li>
      <li><a href="#tab3">选项卡三</a></li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="active" id="tab1">选项卡一的内容</div>
    <div id="tab2">选项卡二的内容</div>
    <div id="tab3">选项卡三的内容</div>
  </div>
</div>

tab 是包裹整个页面的父级容器，用于定位和布局。
tab-header 是选项卡的头部容器。
tab-content 是选项卡的内容容器。
li 是选项卡的每个选项，这里是三个选项卡。
每个选项卡的内容由 div 标签包裹。

接下来是CSS样式：

.tab .tab-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab .tab-header ul li {
  float: left;
}

.tab .tab-header ul li.active a {
  background-color: #ccc;
}

.tab .tab-content div {
  display: none;
}

.tab .tab-content div.active {
  display: block;
}

首先是将 ul 水平排列，并去除列表默认样式。
然后设定每个选项卡的悬浮样式和激活状态下的背景颜色。
隐藏每一个选项卡的内容。
通过激活的类 .active 来显示选项卡对应的内容。

最后是JS脚本：

const tabHeader = document.querySelector('.tab-header');
const tabHeaderLi = tabHeader.querySelectorAll('li');
const tabContent = document.querySelector('.tab-content').children;

for (let i = 0; i < tabHeaderLi.length; i++) {
  tabHeaderLi[i].addEventListener('click', function() {
    for (let j = 0; j < tabHeaderLi.length; j++) {
      tabHeaderLi[j].className = '';
      tabContent[j].className = '';
    }
    this.className = 'active';
    tabContent[i].className = 'active';
  });
}

首先获取选项卡的头部和全部选项卡内容。
然后通过循环为每个选项卡绑定一个点击事件。
在点击事件中，将所有选项卡的类名和内容都移除。
同时为当前点击的选项卡和对应内容添加 .active 类，以达到激活当前选项卡和对应内容的效果。

总结

通过本文的介绍，我们学习了如何使用 HTML 实现选项卡，并且实现了三个具体的选项卡实例。HTML 选项卡的实现代码并不复杂，但是需要合理的CSS样式处理和JS绑定事件的操作。选项卡可以应用于很多领域，如导航栏，内容分类，页面呈现等，对于WEB开发来说是一个不错的组件。