用原生js实现标签页切换
时间: 2024-05-16 13:17:23 浏览: 10
可以使用以下代码实现标签页切换:
HTML 结构:
```html
<div class="tabs">
<ul class="tab-nav">
<li class="active"><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 class="tab-content">
<div id="tab1" class="tab-pane active">This is Tab 1 content</div>
<div id="tab2" class="tab-pane">This is Tab 2 content</div>
<div id="tab3" class="tab-pane">This is Tab 3 content</div>
</div>
</div>
```
JS 代码:
```javascript
// 获取标签页导航元素和内容元素
var tabNav = document.querySelector('.tab-nav');
var tabContent = document.querySelector('.tab-content');
// 获取所有标签页导航菜单项和内容项
var tabNavItems = tabNav.querySelectorAll('li');
var tabContentItems = tabContent.querySelectorAll('.tab-pane');
// 为每个标签页导航菜单项添加点击事件
for (var i = 0; i < tabNavItems.length; i++) {
tabNavItems[i].addEventListener('click', function(e) {
e.preventDefault(); // 阻止默认链接行为
// 切换导航菜单项的选中状态
for (var j = 0; j < tabNavItems.length; j++) {
tabNavItems[j].classList.remove('active');
}
this.classList.add('active');
// 切换显示内容项
var target = this.querySelector('a').getAttribute('href');
for (var k = 0; k < tabContentItems.length; k++) {
tabContentItems[k].classList.remove('active');
if (tabContentItems[k].id === target.substring(1)) {
tabContentItems[k].classList.add('active');
}
}
});
}
```
CSS 样式:
```css
.tabs {
border: 1px solid #ccc;
margin: 20px;
padding: 10px;
}
.tab-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tab-nav li {
display: inline-block;
margin-right: 10px;
}
.tab-nav li.active a {
font-weight: bold;
}
.tab-content .tab-pane {
display: none;
}
.tab-content .tab-pane.active {
display: block;
}
```
需要注意的是,在 CSS 样式中,我们为 `.tab-content .tab-pane` 设置了 `display: none;`,这样所有的内容项都会被隐藏。在 JS 代码中,我们通过添加类名 `.active` 来显示当前选中的内容项。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)