jquery Tabs选项卡切换

时间：2023-03-10 05:57:00
jquery Tabs选项卡切换

效果：

jquery Tabs选项卡切换

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;

}

　　

相关文章