javascript怎么编写tab选项卡

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

1. HTML 结构

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

  

    
Tab 1
    
Tab 2
    
Tab 3
  
  
Tab 1 content
  
Tab 2 content
  
Tab 3 content

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

2. 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，只有在选中对应的选项卡时才会显示。

立即学习“Java免费学习笔记（深入）”；

多墨智能

多墨智能 - AI 驱动的创意工作流写作工具

下载

3. 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" 类，以达到显示选项卡内容的效果。

4. 完整代码

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

  
  
  


  

    

      
Tab 1
      
Tab 2
      
Tab 3
    
    
Tab 1 content
    
Tab 2 content
    
Tab 3 content
  

  

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