JavaScript实现选项卡的淡入效果
时间: 2023-06-23 15:09:02 浏览: 59
可以使用jQuery来实现选项卡的淡入效果,具体代码如下:
HTML代码:
```html
<div class="tab">
<ul class="tab-nav">
<li class="active"><a href="#tab1">选项卡1</a></li>
<li><a href="#tab2">选项卡2</a></li>
<li><a href="#tab3">选项卡3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">选项卡1内容</div>
<div class="tab-pane" id="tab2">选项卡2内容</div>
<div class="tab-pane" id="tab3">选项卡3内容</div>
</div>
</div>
```
CSS代码:
```css
.tab-nav li {
display: inline-block;
margin-right: 20px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
```
JavaScript代码:
```javascript
$(document).ready(function() {
// 点击选项卡切换
$('.tab-nav a').click(function() {
var tab_id = $(this).attr('href');
$('.tab-nav li').removeClass('active');
$('.tab-pane').fadeOut(200);
$(this).parent().addClass('active');
$(tab_id).fadeIn(200);
return false;
});
});
```
这段代码实现了点击选项卡时,先将所有选项卡对应的内容隐藏,然后将点击的选项卡对应的内容淡入显示。同时,在切换选项卡时,也会切换选项卡的样式。