js之选项卡(tag标签)

选项卡（Tab）是常见的网页布局方式，类似于文件夹标签，用户可以通过点击不同的标签来浏览不同的内容。在Web开发中，我们可以使用JavaScript来实现选项卡的功能，这篇文章将为大家介绍如何使用JavaScript实现选项卡，并提供多种实现选项卡的方法和案例供大家参考。

一、原理

实现选项卡的原理其实很简单，就是通过CSS控制显示和隐藏不同的内容。具体来说，就是给每个选项卡按钮（也可以是其他的元素，比如图片等）绑定一个onclick事件，当点击该按钮时，显示其对应的内容，同时隐藏其他选项卡内容。这里我们可以利用CSS的display属性来控制显示和隐藏。

下面是一个选项卡基本的HTML结构，包括选项卡按钮和对应的内容：

```html

```

其中，tab表示选项卡容器，ul表示选项卡按钮列表，li表示每个选项卡按钮，active表示当前选中的选项卡，tab-content表示选项卡内容容器，tab-pane表示每个选项卡的内容。

二、CSS样式

接着我们需要给选项卡容器和选项卡内容容器设置一些基本的样式：

```css

.tab {

border: 1px solid #ccc;

border-radius: 4px;

}

.tab ul {

display: block;

margin: 0;

padding: 0;

list-style: none;

}

.tab li {

display: inline-block;

margin: 0;

padding: 10px 20px;

cursor: pointer;

}

.tab li.active {

background: #fff;

border-top: 1px solid #ccc;

border-left: 1px solid #ccc;

border-right: 1px solid #ccc;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

}

.tab-content {

padding: 20px;

}

.tab-pane {

display: none;

}

.tab-pane.active {

display: block;

}

```

上述样式中，主要包括以下几个部分：

- .tab：选项卡容器的基本样式，设置边框和圆角等；

- .tab ul：选项卡按钮列表的样式，将列表项的样式设为无；

- .tab li：每个选项卡按钮的样式，设置内边距、光标和样式等；

- .tab li.active：当前选中的选项卡按钮的样式，设置选项卡按钮的背景色和边框等，用于区分当前选中的选项卡；

- .tab-content：选项卡内容容器的样式，设置内边距；

- .tab-pane：每个选项卡内容的样式，设置初始隐藏状态；

- .tab-pane.active：当前选中的选项卡内容的样式，设置显示状态。

三、JavaScript实现

有了上述结构和样式的基础，我们就可以通过JavaScript来实现选项卡功能了。实现选项卡的关键在于每个选项卡按钮的点击事件处理函数，当点击某个选项卡按钮时，需要将该按钮设置为选中状态（改变样式），同时显示该按钮对应的内容（改变样式），并隐藏其他选项卡内容。

接下来我们将介绍多种实现选项卡功能的JavaScript方法。

1. 基本方法

首先我们可以使用最基本的JavaScript方法来实现选项卡功能，即为每个选项卡按钮绑定onclick事件处理函数，当点击某个选项卡按钮时，通过JavaScript来进行样式的处理。

```javascript

const tabs = document.querySelectorAll('.tab li');

const contents = document.querySelectorAll('.tab-pane');

tabs.forEach((tab, index) => {

tab.onclick = () => {

// 隐藏其他选项卡

tabs.forEach((t, i) => {

if (index !== i) {

t.classList.remove('active');

}

});

contents.forEach((c, i) => {

if (index !== i) {

c.classList.remove('active');

}

});

// 显示当前选中的选项卡

tab.classList.add('active');

contents[index].classList.add('active');

}

});

```

上述代码首先获取了所有的选项卡按钮和选项卡内容，然后为每个选项卡按钮绑定了一个onclick事件处理函数。当点击某个选项卡按钮时，通过遍历其他选项卡和内容来设置其样式，然后再将该选项卡和对应的内容设置为选中状态。

2. 事件委托方法

如果选项卡按钮数量较多，单独为每个选项卡按钮绑定事件处理函数可能会导致代码量过大，此时我们可以使用事件委托方法来减少代码量。具体来说，我们可以将事件处理函数绑定在选项卡容器上，然后判断点击的元素是否为选项卡按钮，再进行相应的样式处理。

```javascript

const tab = document.querySelector('.tab');

tab.onclick = (event) => {

const target = event.target;

// 判断点击的元素是否为选项卡按钮

if (target.nodeName === 'LI') {

const tabs = tab.querySelectorAll('.tab li');

const contents = tab.querySelectorAll('.tab-pane');

const index = Array.prototype.indexOf.call(tabs, target);

// 隐藏其他选项卡

tabs.forEach((t, i) => {

if (index !== i) {

t.classList.remove('active');

}

});

contents.forEach((c, i) => {

if (index !== i) {

c.classList.remove('active');

}

});

// 显示当前选中的选项卡

target.classList.add('active');

contents[index].classList.add('active');

}

};

```

上述代码中，我们将事件处理函数绑定在选项卡容器上，当点击选项卡容器中的元素时，判断是否为选项卡按钮，然后进行相应的样式处理。

3. 面向对象方法

最后，我们还可以使用面向对象的方法来实现选项卡功能，其中选项卡和选项卡按钮可以分别封装为两个类，从而实现代码的复用和管理。

```javascript

class Tab {

constructor (el) {

this.el = el;

this.tabs = this.el.querySelectorAll('.tab li');

this.contents = this.el.querySelectorAll('.tab-pane');

this.bindEvents();

}

bindEvents () {

this.el.addEventListener('click', (event) => {

const target = event.target;

if (target.nodeName === 'LI') {

this.switchTab(target);

}

});

}

switchTab (tab) {

const index = Array.prototype.indexOf.call(this.tabs, tab);

// 隐藏其他选项卡

this.tabs.forEach((t, i) => {

if (index !== i) {

t.classList.remove('active');

}

});

this.contents.forEach((c, i) => {

if (index !== i) {

c.classList.remove('active');

}

});

// 显示当前选中的选项卡

tab.classList.add('active');

this.contents[index].classList.add('active');

}

}

const tab = new Tab(document.querySelector('.tab'));

```

上述代码中，我们定义了一个Tab类，并在构造函数中获取选项卡和选项卡按钮，并为选项卡容器绑定了一个点击事件处理函数，当点击选项卡容器中的元素时，判断是否为选项卡按钮，并执行相应的方法。在Tab类中，我们还定义了一个switchTab方法来处理选项卡按钮的切换。

四、案例展示

接下来我们来看一些实现选项卡功能的案例。

1. 简单选项卡

这是一个简单的选项卡示例，只包含文本内容，并使用了第一种JavaScript实现方法。

代码链接：https://jsfiddle.net/angellee/xzv86onn/1/

2. 图片选项卡

这是一个图片选项卡示例，每个选项卡对应一张图片，并使用了第二种JavaScript实现方法。

代码链接：https://jsfiddle.net/angellee/jd6geyLL/1/

3. 滑动选项卡

这是一个滑动选项卡示例，选项卡按钮和内容在切换时会有滑动的效果。代码中使用了第三种JavaScript实现方法，并利用CSS的transition属性实现了滑动效果。

代码链接：https://jsfiddle.net/angellee/rb5gvz9n/1/

四、总结

选项卡是Web开发中常见的布局方式，可以通过JavaScript来实现选项卡的功能。实现选项卡的原理是通过CSS控制显示和隐藏不同的内容，当点击选项卡按钮时，通过JavaScript来改变样式的显示与隐藏。本文介绍了多种实现选项卡功能的JavaScript方法，并提供了多个选项卡的示例，供读者参考。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/