怎么用js去触发选项卡的切换?
时间: 2024-01-01 19:04:50 浏览: 42
可以使用JavaScript来触发选项卡的切换,具体实现方式如下:
1. 获取选项卡元素和选项卡内容元素。
```javascript
var tabItems = document.querySelectorAll('.tab-item');
var tabContentItems = document.querySelectorAll('.tab-content-item');
```
其中,`.tab-item`和`.tab-content-item`是选项卡和选项卡内容的类名。
2. 给每个选项卡元素添加点击事件监听器,当点击时切换选项卡。
```javascript
tabItems.forEach(function(item) {
item.addEventListener('click', function() {
// 移除当前选项卡的active类
removeActiveClass();
// 添加选中选项卡的active类
this.classList.add('active');
// 获取对应选项卡内容的id
var tabContentId = this.dataset.tab;
// 选项卡内容切换
document.querySelector('#' + tabContentId).classList.add('active');
});
});
```
3. 定义移除当前选项卡的active类的函数。
```javascript
function removeActiveClass() {
tabItems.forEach(function(item) {
item.classList.remove('active');
});
tabContentItems.forEach(function(item) {
item.classList.remove('active');
});
}
```
完整代码如下:
```html
<div class="tabs">
<ul class="tab-nav">
<li class="tab-item active" data-tab="tab1">选项卡1</li>
<li class="tab-item" data-tab="tab2">选项卡2</li>
<li class="tab-item" data-tab="tab3">选项卡3</li>
</ul>
<div class="tab-content">
<div class="tab-content-item active" id="tab1">选项卡1的内容</div>
<div class="tab-content-item" id="tab2">选项卡2的内容</div>
<div class="tab-content-item" id="tab3">选项卡3的内容</div>
</div>
</div>
<script>
var tabItems = document.querySelectorAll('.tab-item');
var tabContentItems = document.querySelectorAll('.tab-content-item');
tabItems.forEach(function(item) {
item.addEventListener('click', function() {
removeActiveClass();
this.classList.add('active');
var tabContentId = this.dataset.tab;
document.querySelector('#' + tabContentId).classList.add('active');
});
});
function removeActiveClass() {
tabItems.forEach(function(item) {
item.classList.remove('active');
});
tabContentItems.forEach(function(item) {
item.classList.remove('active');
});
}
</script>
```
在上述代码中,当我们点击选项卡时,会先移除当前选项卡和选项卡内容的active类,然后再将点击的选项卡和对应的选项卡内容添加active类,从而实现选项卡的切换。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)