jQuery实现复杂样式选项卡
时间: 2023-11-16 22:42:49 浏览: 37
可以使用jQuery来实现复杂样式的选项卡。下面是一个简单的示例:
HTML代码:
```html
<div class="tab-container">
<ul class="tab-menu">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
Content for Tab 1
</div>
<div class="tab-pane">
Content for Tab 2
</div>
<div class="tab-pane">
Content for Tab 3
</div>
</div>
</div>
```
CSS代码:
```css
.tab-container {
width: 500px;
}
.tab-menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.tab-menu li {
display: inline-block;
padding: 10px;
background-color: #eee;
cursor: pointer;
}
.tab-menu li.active {
background-color: #ccc;
}
.tab-pane {
display: none;
padding: 20px;
}
.tab-pane.active {
display: block;
}
```
jQuery代码:
```javascript
$(document).ready(function() {
$('.tab-menu li').click(function() {
var index = $(this).index();
$('.tab-menu li').removeClass('active');
$(this).addClass('active');
$('.tab-pane').removeClass('active');
$('.tab-pane').eq(index).addClass('active');
});
});
```
以上代码实现了一个带有选项卡的容器。点击不同的选项卡,对应的内容会显示出来。CSS部分定义了选项卡和内容的样式,jQuery部分则实现了点击选项卡切换内容的功能。