jquery写标签页组件
时间: 2023-05-16 12:06:12 浏览: 64
可以使用以下代码实现一个简单的标签页组件:
HTML:
```
<div class="tab-container">
<ul class="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">Tab 1 Content</div>
<div id="tab2" class="tab-pane">Tab 2 Content</div>
<div id="tab3" class="tab-pane">Tab 3 Content</div>
</div>
</div>
```
CSS:
```
.tab-container {
margin: 20px;
}
.tabs {
list-style: none;
margin: 0;
padding: 0;
}
.tabs li {
display: inline-block;
margin-right: 10px;
}
.tabs li a {
display: block;
padding: 5px 10px;
background-color: #eee;
color: #333;
text-decoration: none;
}
.tabs li.active a {
background-color: #333;
color: #fff;
}
.tab-content .tab-pane {
display: none;
padding: 10px;
}
.tab-content .active {
display: block;
}
```
JavaScript:
```
$(document).ready(function() {
$('.tabs li').click(function() {
var tab_id = $(this).find('a').attr('href');
$('.tabs li').removeClass('active');
$('.tab-content .tab-pane').removeClass('active');
$(this).addClass('active');
$(tab_id).addClass('active');
});
});
```
这个组件使用了 jQuery 库,它会在页面加载完成后执行一个函数,该函数会绑定标签页的点击事件。当用户点击标签页时,它会从链接中获取标签页的 ID,然后将所有标签页的选中状态和内容区域的显示状态重置,最后将当前标签页的选中状态和内容区域的显示状态设置为活动状态。