Jquery简单选项卡

最新推荐文章于 2015-04-16 01:46:47 发布

木木守护神

最新推荐文章于 2015-04-16 01:46:47 发布

阅读量449

点赞数

分类专栏：前端开发文章标签： jquery选项卡

本文链接：https://blog.csdn.net/sinat_19435069/article/details/42168221

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近做的一个简单的jq选项卡，没有实现自动播放，代码总量为120行。素材为网上获取，虽然功能简陋，但胜在简单一看就明白。

jquery：1.3.2

演示地址：http://runjs.cn/detail/4jerxozy

html

<!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>

css

*{
margin:0;
padding:0;
}
body{

background:#373737;
}

.middle{
background:url(../images/middleBg.png) repeat-x;
width:1000px;
height:500px;
margin:20px auto;

}
.warpper{
width:920px;
height:400px;
margin:0 auto
}

.tab{
width:100%;
height:47px;
background:url(../images/featuresTabBg.png) no-repeat;
margin-bottom:5px;
}
.tab a{
font-size:1.1em;
color:green; 
float:left;
display:block;
text-align:center;
width:180px;
height:46px;
padding:1px;
line-height:40px;
}
.content{
clear:both;
width:100%;
position:relative;
height:340px;
border:2px green solid;
//overflow:hidden;
}
.content .innerCon{
position:absolute;
left:0px;
top:0px;
width:100%;
height:340px;
}
.content .innerCon img{
width:910px;
height:328px;
padding:1px 5px;
}

.tab a.now{
color:white;
}

截图

代码我分享在runjs，详见文章开头的演示地址。

木木守护神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery简单选项卡

最近做的一个简单的jq选项卡，没有实现自动播放，代码总量为120行。素材为网上获取，虽然功能简陋，但胜在简单一看就明白。jquery：1.3.2演示地址：http://runjs.cn/detail/4jerxozyhtml图片滚动var nowcontentleft=0;var nowindex=0;var awidth=180;$(functi
复制链接

扫一扫

专栏目录