一个html能拆分多个tab,一个页面可多处重复使用的简单tab标签jQuery代码
时间: 2024-05-07 20:23:13 浏览: 18
这里是一个简单的用jQuery实现tab标签的代码:
HTML结构:
```
<div class="tab-container">
<ul class="nav-tabs">
<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">Content for Tab 1 goes here</div>
<div id="tab2" class="tab-pane">Content for Tab 2 goes here</div>
<div id="tab3" class="tab-pane">Content for Tab 3 goes here</div>
</div>
</div>
```
CSS样式:
```
.tab-container .nav-tabs li {
display: inline-block;
}
.tab-container .nav-tabs li a {
padding: 10px;
background: #eee;
border: 1px solid #ccc;
border-radius: 5px 5px 0 0;
margin-right: 5px;
}
.tab-container .nav-tabs li.active a {
background: #fff;
}
.tab-container .tab-content {
border: 1px solid #ccc;
border-top: none;
padding: 10px;
border-radius: 0 5px 5px 5px;
}
.tab-container .tab-pane {
display: none;
}
.tab-container .tab-pane.active {
display: block;
}
```
jQuery代码:
```
$(document).ready(function() {
$('.nav-tabs li:first-child').addClass('active');
$('.tab-content .tab-pane:first-child').addClass('active');
$('.nav-tabs a').click(function(e) {
e.preventDefault();
var tab = $(this).attr('href');
$('.nav-tabs li').removeClass('active');
$(this).parent().addClass('active');
$('.tab-content .tab-pane').removeClass('active');
$(tab).addClass('active');
});
});
```
这段代码可以实现多个tab标签的效果,并且可以在同一个页面中重复使用。只需要复制粘贴HTML结构和CSS样式,修改id名称即可。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)