javascript怎么编写tab选项卡-前端问答-PHP中文网

javascript怎么编写tab选项卡

PHPz

发布： 2023-04-25 16:19:26

原创

1225人浏览过

随着互联网的发展，网站的界面越来越炫酷，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，只有在选中对应的选项卡时才会显示。

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

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

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选项卡的详细内容，更多请关注php中文网其它相关文章！