jquery tabs切换
时间: 2024-01-25 17:04:41 浏览: 175
以下是一个使用jQuery实现tabs切换的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tabs切换</title>
<style>
.tab {
display: inline-block;
padding: 10px;
background-color: #ccc;
cursor: pointer;
}
.tab.current {
background-color: #f00;
}
.content {
display: none;
padding: 10px;
background-color: #f00;
color: #fff;
}
</style>
</head>
<body>
<div id="tabs01">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div id="container01">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var tabs = function(tab, con) {
tab.click(function() {
var indx = tab.index(this);
tab.removeClass('current');
$(this).addClass('current');
con.hide();
con.eq(indx).show();
})
}
$(function() {
tabs($("#tabs01 .tab"), $('#container01 .content'));
})
</script>
</body>
</html>
```
这个例子中,我们使用了jQuery的click事件和addClass、removeClass、show、hide等方法来实现tabs切换效果。当点击某个tab时,会给该tab添加一个current类,并显示对应的content,同时隐藏其他content。
阅读全文