Jquery简单选项卡

来源：互联网发布：淘宝支付宝是马云的吗编辑：程序博客网时间：2024/06/06 13:07

最近做的一个简单的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