js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）

本文将为大家介绍如何使用JavaScript和CSS实现圆角边框TAB选项卡滑动门效果，本文将会分享两款实现方案，让大家得以更好的理解和掌握这个知识点。

一、实现方案1

1.1 HTML结构

首先，我们需要如下HTML结构：

<div class="tab">
  <ul class="tab-list">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <div id="tab1" class="tab-content">Tab 1 content goes here.</div>
  <div id="tab2" class="tab-content">Tab 2 content goes here.</div>
  <div id="tab3" class="tab-content">Tab 3 content goes here.</div>
</div>

在上述代码中，我们使用了一个div元素作为选项卡的容器，内部包含了一个ul元素作为选项卡标签栏，以及若干个div元素作为选项卡内容。

1.2 CSS样式

接下来，我们需要为以上的HTML代码提供相关的CSS样式，实现选项卡的基本样式和圆角边框。请参考下列CSS代码：

.tab {
  position: relative;
}

.tab-list {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.tab-list li {
  flex: 1;
  text-align: center;
  margin: 0 5px;
  padding: 10px;
  border-radius: 6px 6px 0 0;
  background-color: #ccc;
  cursor: pointer;
}

.tab-list li.active {
  background-color: #fff;
}

.tab-content {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 6px 6px 6px;
  background-color: #fff;
}

上述代码中，我们定义了一个.tab类作为选项卡的容器，同时为其设置了相对定位。.tab-list类用于定义选项卡的标签栏样式，我们使用了flex布局实现了横向排列的标签栏。.tab-list li类用于定义每个选项卡标签的样式。而.active类用于表示当前选项卡的激活状态，其背景颜色为白色。

.tab-content类用于定义选项卡内容的样式，其中的绝对定位表示选项卡内容将覆盖在标签栏下方，其边框样式实现了圆角效果。

1.3 JavaScript代码

最后，我们需要添加一些JavaScript代码，以实现选项卡的切换效果。请参考下列代码：

let tabs = document.querySelectorAll('.tab-list li');
let contents = document.querySelectorAll('.tab-content');

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

    contents.forEach((content) => {
      content.style.display = 'none';
    });
    contents[index].style.display = 'block';
  });
});

上述代码中，我们首先获取了所有的选项卡标签元素和选项卡内容元素，并添加了点击事件监听器。每次点击选项卡标签时，我们会将其他选项卡标签的.active类移除，并将当前选项卡标签添加.active类，以使其显示为选中状态。

最后，我们将所有选项卡内容元素隐藏，只让当前选中的选项卡内容显示出来，以达到选项卡的切换效果。

二、实现方案2

2.1 HTML结构

这次我们会略微改变HTML结构：

<div class="tab">
  <ul class="tab-list">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li class="slider"></li>
  </ul>

  <div id="tab1" class="tab-content">Tab 1 content goes here.</div>
  <div id="tab2" class="tab-content">Tab 2 content goes here.</div>
  <div id="tab3" class="tab-content">Tab 3 content goes here.</div>
</div>

我们在选项卡标签栏中添加了一个空的li元素，用于作为滑动门的基础。

2.2 CSS样式

下面是这次实现方案的CSS样式代码：

.tab {
  position: relative;
}

.tab-list {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
}

.tab-list li {
  flex: 1;
  text-align: center;
  margin: 0;
  padding: 10px;
  cursor: pointer;
}

.tab-list li.active {
  background-color: #fff;
}

.slider {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  background-color: #007aff;
  transition: all .3s ease-in-out;
}

.tab-list li:nth-child(1):hover ~ .slider {
  transform: translateX(0);
}

.tab-list li:nth-child(2):hover ~ .slider {
  transform: translateX(100%);
}

.tab-list li:nth-child(3):hover ~ .slider {
  transform: translateX(200%);
}

.tab-content {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 6px 6px 6px;
  background-color: #fff;
}

本次方案相较于第一个方案相对简单，我们只是在实现圆角边框TAB选项卡滑动门的基础上，再添加了一个滑动门的效果。

.slider类用于定义滑动门的样式，我们通过绝对定位将其定位在选项卡标签栏下方，并设定一个高度和背景颜色。而在.tab-list li:nth-child(1):hover ~ .slider等 CSS选择器中，我们设定鼠标hover某个选项卡标签时，滑动门会根据当前激活的选项卡进行相应的动画效果。

2.3 JavaScript代码

同样的，在这个方案中，我们需要添加一些JavaScript代码以使选项卡可以切换。以下为代码：

let tabs = document.querySelectorAll('.tab-list li');
let contents = document.querySelectorAll('.tab-content');

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

    let slider = document.querySelector('.slider');
    slider.style.transform = `translateX(${index * 100}%)`;

    contents.forEach((content) => {
      content.style.display = 'none';
    });
    contents[index].style.display = 'block';
  });
});

本次JavaScript代码与第一个方案中的代码类似，只是多了一个滑动门部分的代码，根据当前激活的选项卡改变滑动门的位置。

至此，我们已经成功实现了这个圆角边框TAB选项卡滑动门的效果。两个实现方案代码不同，可以根据自己的实际需求进行选择使用。

示例说明：

下面是两个示例网页实现了以上代码：

方案1示例网页：https://codepen.io/Grace-zhangxo/pen/oNwQYqJ

方案2示例网页：https://codepen.io/Grace-zhangxo/pen/qBRqqBX