实现tab标签切换比较简单，下面先看看我实现的效果：
我主要实现了：
1、tab之间的相互切换；
2、显示选中的tab
下面看看实现代码：
css：
html,body,div{
font-size: 12px;
font-family:"Arial";
}
.tab-ui{
width: 400px;
height: 300px;
position: relative;
}
.tab-title{
border-top-right-radius:8px;
float: left;
border: solid 1px #7EABCD;
background: #c5dbec;
padding: 5px;
font-weight: bold;
color: #ffffff;
margin: 1px;
}
.tab-title:hover{
cursor: pointer;
}
.tab-title-active{
background: #7EABCD;
}
.content{
width: 100%;
height: 100%;
position: absolute;
top: 27px;
left: 1px;
}
.tab-content{
padding: 10px;
border: solid 1px #c5dbec;
}
js：
function show(total,active){
for(var i=1;i<total+1;i++){
$("#tab"+i).removeClass("tab-title-active");
$("#content"+i).hide();
}
$("#tab"+active).addClass("tab-title-active");
$("#content"+active).show();
}
html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAB切换标签</title>
<link rel="stylesheet" href="tabtest.css">
<script src="../jquery-1.8.3.js"></script>
<script src="tabtest.js"></script>
</head>
<body>
<div class="tab-ui">
<div class="tab">
<div class="tab-title tab-title-active" id="tab1" onclick="show(3,1)">
<a>法家简介</a>
</div>
<div class="tab-title" id="tab2" onclick="show(3,2)">
<a>墨家简介</a>
</div>
<div class="tab-title" id="tab3" onclick="show(3,3)">
<a>道家简介</a>
</div>
</div>
<div class="content">
<div class="tab-content" id="content1">
法家，代表人物韩非、李斯、管仲、商鞅，代表作《韩非子》、《管子》。
</div>
<div class="tab-content" id="content2" style="display: none;">
墨家，代表人物墨翟，代表作《墨子》。
</div>
<div class="tab-content" id="content3" style="display: none;">
道家，代表人物李耳、庄周，代表作《老子》、《庄子》。
</div>
</div>
</div>
</body>
</html>
实现思路：
循环将所有的内容标签隐藏，并将tab标题栏的active样式清除，完了之后设置选中标签的内容显示，并给tab标题栏添加active样式。
如有疑问，请联系：
QQ：1004740957
Email：[email protected]
时间： 2024-08-08 22:04:40