javascript怎么编写tab选项卡

时间：2023-04-25 17:52

随着互联网的发展，网站的界面越来越炫酷，Tab 选项卡成为了现代网站中常见的 UI 元素之一。这篇文章将介绍如何使用 JavaScript 编写 Tab 选项卡，来让你的网站更加现代化。

HTML 结构

首先，我们需要在 HTML 中创建选项卡的结构，可以采用以下代码：

<div class="tab-container">  <ul class="tab-nav">    <li class="tab-nav-item active">Tab 1</li>    <li class="tab-nav-item">Tab 2</li>    <li class="tab-nav-item">Tab 3</li>  </ul>  <div class="tab-content active">Tab 1 content</div>  <div class="tab-content">Tab 2 content</div>  <div class="tab-content">Tab 3 content</div></div>

上面的 HTML 结构包含了一个选项卡容器（tab-container），其中包含了一个选项卡导航栏（tab-nav）和选项卡内容（tab-content）。在导航栏中，每个选项卡都是一个列表项（tab-nav-item），并且可以通过添加 "active" 类来指示当前选中的选项卡。在内容中，也可以通过添加 "active" 类来指示当前选中的选项卡的内容。

CSS 样式

接下来，我们需要为选项卡和内容添加样式，可以采用以下代码：

.tab-container {  display: flex;  flex-direction: column;  margin: 20px;  border: 1px solid #ccc;  border-radius: 4px;  overflow: hidden;  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;}.tab-nav {  display: flex;  justify-content: space-between;  align-items: center;  background: #eee;  padding: 10px;}.tab-nav-item {  cursor: pointer;  padding: 10px;  border-radius: 4px;  transition: all 0.3s ease;}.tab-nav-item:hover {  background: #fff;}.tab-nav-item.active {  background: #fff;  font-weight: bold;}.tab-content {  padding: 20px;  display: none;}.tab-content.active {  display: block;}

上面的 CSS 样式设置了选项卡容器的位置、大小、边框、阴影等属性，以及导航栏和选项卡内容的样式。注意，选项卡内容的 display 属性设置为 none，只有在选中对应的选项卡时才会显示。

JavaScript 代码

最后，我们需要编写 JavaScript 代码来使选项卡实现点击切换显示。可以采用以下代码：

const tabs = document.querySelectorAll('.tab-nav-item');const contents = document.querySelectorAll('.tab-content');for (let i = 0; i < tabs.length; i++) {  tabs[i].addEventListener('click', function() {    // 首先隐藏所有选项卡内容    for (let j = 0; j < contents.length; j++) {      contents[j].classList.remove('active');    }    // 设置当前选中的选项卡添加 "active" 类    for (let j = 0; j < tabs.length; j++) {      tabs[j].classList.remove('active');    }    this.classList.add('active');    contents[i].classList.add('active');  });}

上面的 JavaScript 代码使用了事件监听器实现了点击选项卡导航栏时，切换对应的选项卡内容的功能。首先，隐藏所有选项卡内容，然后设置当前选中的选项卡和对应的内容添加 "active" 类，以达到显示选项卡内容的效果。

完整代码

最后，我们将以上的 HTML、CSS 和 JavaScript 代码结合起来，形成完整的代码如下：

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>Tab 选项卡</title>  <style>    .tab-container {      display: flex;      flex-direction: column;      margin: 20px;      border: 1px solid #ccc;      border-radius: 4px;      overflow: hidden;      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;    }    .tab-nav {      display: flex;      justify-content: space-between;      align-items: center;      background: #eee;      padding: 10px;    }    .tab-nav-item {      cursor: pointer;      padding: 10px;      border-radius: 4px;      transition: all 0.3s ease;    }    .tab-nav-item:hover {      background: #fff;    }    .tab-nav-item.active {      background: #fff;      font-weight: bold;    }    .tab-content {      padding: 20px;      display: none;    }    .tab-content.active {      display: block;    }  </style></head><body>  <div class="tab-container">    <ul class="tab-nav">      <li class="tab-nav-item active">Tab 1</li>      <li class="tab-nav-item">Tab 2</li>      <li class="tab-nav-item">Tab 3</li>    </ul>    <div class="tab-content active">Tab 1 content</div>    <div class="tab-content">Tab 2 content</div>    <div class="tab-content">Tab 3 content</div>  </div>  <script>    const tabs = document.querySelectorAll('.tab-nav-item');    const contents = document.querySelectorAll('.tab-content');    for (let i = 0; i < tabs.length; i++) {      tabs[i].addEventListener('click', function() {        // 首先隐藏所有选项卡内容        for (let j = 0; j < contents.length; j++) {          contents[j].classList.remove('active');        }        // 设置当前选中的选项卡添加 "active" 类        for (let j = 0; j < tabs.length; j++) {          tabs[j].classList.remove('active');        }        this.classList.add('active');        contents[i].classList.add('active');      });    }  </script></body></html>

现在，你可以通过复制粘贴以上代码来自己实现一个 Tab 选项卡，让你的网站更加现代化。

以上就是javascript怎么编写tab选项卡的详细内容，更多请关注Gxl网其它相关文章！