jquery简单的选项卡

2015/07/17 30793

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8" />
<title>图片滚动</title>

<link rel="stylesheet" href="style/mystyle.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
var nowcontentleft=0;
var nowindex=0;
var awidth=180;
$(function(){
	$('.tab a').click(function(){
		var index = $(".tab a").index(this);
		showPic(index);
	});
	
$('.innerCon').hide();
$('.now').show();
});//$


function showPic(index){

if(nowindex==index)
return ;
nowindex=index;
//$('.now').hide('slow');
$('a').removeClass('now');
$('a:eq('+index+')').addClass('now');
$('.innerCon:eq('+index+')').show(1000);

//设置导航条的背景偏移。
$('.tab').css("background-position","0px -"+nowindex*47+"px");
}



</script>
</head>

<body>
	<div class="middle">
	<div class="warpper">
		<div class="tab" id="tab">
			<a href="#">模板王</a>
			<a href="#">html</a>
			<a href="#">css</a>
			<a href="#">js</a>
			<a href="#">jquery</a>
		</div>
	
		<div class="content" id="content">
			 <div id="con1" class="innerCon now"><img src="images/hu.jpg" /></div>
			 <div id="con2" class="innerCon"><img src="images/hu2.jpg" /></div>
			 <div id="con3" class="innerCon"><img src="images/hu3.jpg" /></div>
			 <div id="con4" class="innerCon"><img src="images/hu4.jpg" /></div>
			 <div id="con5" class="innerCon"><img src="images/he.jpg" /></div>
	
		</div>
	</div>
	</div>
</body>
</html>