jquery Tabs选项卡切换

浏览数：34 / 时间：2015年06月09日

效果：

技术分享

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;
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery Tabs选项卡切换