可以使用
jQuery来实现一个简单的
tab栏切换。下面是一个示例代码：
HTML：
```html
<div class="
tab-wrapper">
<ul class="
tab-nav">
<li><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">
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：
```css
.
tab-nav li {
display: inline-block;
margin-right: 10px;
}
.
tab-nav li a {
display: block;
padding: 5px;
background-color: #eee;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
.
tab-nav li.active a {
background-color: #fff;
border-bottom-color: transparent;
}
.
tab-content .
tab-pane {
display: none;
}
.
tab-content .active {
display: block;
}
```
JavaScript：
```javascript
$(document).ready(function() {
$('.
tab-nav li:first-child').addClass('active');
$('.
tab-content .
tab-pane:first-child').addClass('active');
$('.
tab-nav li a').click(function() {
var
tab_id = $(this).attr('href');
$('.
tab-nav li').removeClass('active');
$('.
tab-content .
tab-pane').removeClass('active');
$(this).parent().addClass('active');
$(
tab_id).addClass('active');
return false;
});
});
```
首先，给每个
tab页一个唯一的id，然后使用CSS来设置样式。JavaScript代码中，我们给第一个
tab页和
tab导航
栏的第一个选项添加active类。然后，当点击
tab导航
栏的某一项时，我们首先移除所有的active类，然后给被点击的导航
栏项和对应的
tab页添加active类。最后，返回false以阻止默认链接行为。
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
