效果：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery Tabs选项卡切换</title>
</head>
<body>
<div class="country-profile">
<!--tabs-->
<ul class="tabs-title clearfix">
<li title="tab1" class="tab-common tabActive">概况</li>
<li title="tab2" class="tab-common">行政</li>
<li title="tab3" class="tab-common">经济</li>
<li title="tab4" class="tab-common">教育</li>
<li title="tab5" class="tab-common">福利</li>
<li title="tab6" class="tab-common">风土人情</li>
</ul>
<div class="tab-contents">
<span class="tab-content" id="tab1">
1这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
</span>
<span class="tab-content" id="tab2" style="display:none">
2这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
</span>
<span class="tab-content" id="tab3" style="display:none">
3这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
</span>
<span class="tab-content" id="tab4" style="display:none">
4这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
</span>
<span class="tab-content" id="tab5" style="display:none">
5这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
</span>
<span class="tab-content" id="tab6" style="display:none">
6这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容
</span>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tabs-title li").bind("click",function(){
$(this).addClass("tabActive").siblings().removeClass("tabActive");
var tagTitle=$(this).attr("title");
$("#" +tagTitle).show("slow").siblings().hide("slow");
});
});
</script>
</body>
</html>
css部分：
*{
margin:0;
padding: 0;
}
.clearfix:after{
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix{*zoom:1;}
.country-profile {
width: 500px;
height: 220px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: #eee;
}
li{
list-style: none;
}
.tab-content {
margin-top: -20px;
padding: 10px;
}
.tabs-title {
display: inline-block;
}
.tabs-title li{
float: left;
}
.tab-common {
width: 82px;
padding: 5px 0;
background-color: #333;
color: #fff;
margin-left: 1px;
text-align: center;
cursor: pointer;
}
.tabActive{
position: relative;
color:orange;
}
.tabActive:after{
content: ‘‘;
border-style: solid;
border-width: 0 4px 8px 4px;
border-color:transparent transparent #fff transparent;
position: absolute;
bottom:-2px;
left:50%;
margin-left: -4px;
}
.country-flag {
width:240px;
height: 203px;
float: left;
}
时间： 2024-10-03 07:39:54