jQuery上下弹性切换Tab选项卡js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery上下弹性切换Tab选项卡js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Using CSS Sprites</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	
	<script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/widget.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

	<div id="page-wrap">
		
		<div class="box">

			<ul id="catNav">
				<li class="activeCatButton"><a id="list-one-button">Apple</a></li>
				<li><a id="list-two-button">Linux</a></li>
				<li><a id="list-three-button">Microsoft</a></li>
				<li><a id="list-four-button">News</a></li>
			</ul>
			
			<ul class="cat-list" id="list-one">
				<li><a href="#">Example Story from List One</a></li>
				<li><a href="#">Example Story from List One</a></li>
				<li><a href="#">Example Story from List One</a></li>
				<li><a href="#">Example Story from List One</a></li>
				<li><a href="#">Example Story from List One</a></li>
			</ul>

			<ul class="cat-list" id="list-two">
				<li><a href="#">Example Story from List Two</a></li>
				<li><a href="#">Example Story from List Two</a></li>
				<li><a href="#">Example Story from List Two</a></li>
				<li><a href="#">Example Story from List Two</a></li>
				<li><a href="#">Example Story from List Two</a></li>
			</ul>

			<ul class="cat-list" id="list-three">
				<li><a href="#">Example Story from List Three</a></li>
				<li><a href="#">Example Story from List Three</a></li>
				<li><a href="#">Example Story from List Three</a></li>
				<li><a href="#">Example Story from List Three</a></li>
				<li><a href="#">Example Story from List Three</a></li>
			</ul>

			<ul class="cat-list" id="list-four">
				<li><a href="#">Example Story from List Four</a></li>
				<li><a href="#">Example Story from List Four</a></li>
				<li><a href="#">Example Story from List Four</a></li>
				<li><a href="#">Example Story from List Four</a></li>
				<li><a href="#">Example Story from List Four</a></li>
			</ul>
			
		</div>
	
	</div>

</body>

</html>

JS代码(widget.js):

$(function(){
	$("#list-two").hide();
	$("#list-three").hide();
	$("#list-four").hide();
	$("#list-one-button").click(function(){
	$(".cat-list").slideUp(600);
	$("#list-one").slideDown(600);
}
);
	$("#list-two-button").click(function(){
	$(".cat-list").slideUp(600);
	$("#list-two").slideDown(600);
}
);
	$("#list-three-button").click(function(){
	$(".cat-list").slideUp(600);
	$("#list-three").slideDown(600);
}
);
	$("#list-four-button").click(function(){
	$(".cat-list").slideUp(600);
	$("#list-four").slideDown(600);
}
);
	$("#catNav li a").click(function(){
	$("#catNav li").removeClass("activeCatButton");
	$(this).parent().addClass("activeCatButton");
}
);
}
);

CSS代码(style.css):

/* CSS-Tricks Example by Chris Coyier http://css-tricks.com*/
*{margin:0;padding:0;}
body{font-family:Georgia,serif;background:#494949;}
#page-wrap{width:300px;margin:20px auto;}
a{text-decoration:none;}
ul{list-style:none;}
.box{background:#a7a7a7;-moz-border-radius:5px;-webkit-border-radius:5px;padding:10px;margin:0 0 15px 0;}
.box ul li{font-size:11px;margin:0;border-bottom:1px solid #666;}
.box ul li a{color:#222;display:block;padding:4px 4px;margin:0;border-bottom:1px solid #ccc;}
.box ul li:last-child,.box ul li:last-child a{border:none;}
.box ul li a:hover{background:#ccc;text-decoration:none;}
#catNav{background:#494949;padding:5px 5px 5px 37px;-moz-border-radius:5px;-webkit-border-radius:5px;overflow:hidden;margin:0 0 10px 0;}
#catNav li{display:inline;}
#catNav li a{display:block;width:50px;height:50px;text-indent:-9999px;background:url(images/catSprite.png);float:left;border:none;padding:0;}
#catNav li a#list-one-button{background-position:-50px -50px;}
#page-wrap #catNav li.activeCatButton a#list-one-button{background-position:-50px -100px;}
#catNav li a#list-one-button:hover{background-position:-50px 0px;}
#catNav a#list-two-button{background-position:-100px -50px;}
#page-wrap #catNav li.activeCatButton a#list-two-button{background-position:-100px -100px;}
#catNav li a#list-two-button:hover{background-position:-100px 0px;}
#catNav a#list-three-button{background-position:0px -50px;}
#page-wrap #catNav li.activeCatButton a#list-three-button{background-position:0px -100px;}
#catNav li a#list-three-button:hover{background-position:0px 0px;}
#catNav a#list-four-button{background-position:-150px -50px;}
#page-wrap #catNav li.activeCatButton a#list-four-button{background-position:-150px -100px;}
#catNav li a#list-four-button:hover{background-position:-150px 0px;}

附件:下载该文件资源,减少时间成本(增值服务)