<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery 选项卡</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} .blank20{height:20px;overflow:hidden;} /* tabbed_content */ .tabbed_content{background-color:#000000;620px;} .tabs{height:62px;position:relative;} .tabs .moving_bg{padding:15px;background-color:#7F822A;background-image:url(images/arrow_down_green.gif);position:absolute;125px;z-index:190;left:0;padding-bottom:29px;background-position:bottom left;background-repeat:no-repeat;} .tabs .tab_item{display:block;float:left;padding:15px;125px;color:#ffffff;text-align:center;z-index:200;position:relative;cursor:pointer;font-size:12px;} .tabbed_content .slide_content{overflow:hidden;background-color:#000000;padding:20px 0 20px 20px;position:relative;600px;} .tabslider{5000px;} .tabslider ul{float:left;560px;margin:0px;padding:0px;margin-right:40px;} .tabslider ul a{color:#ffffff;text-decoration:none;} .tabslider ul a:hover{color:#aaaaaa;} .tabslider ul li{padding-bottom:7px;} </style> </head> <body> <div class="tabbed_content"> <div class="tabs"> <div class="moving_bg"> </div> <span class="tab_item">js图片特效</span> <span class="tab_item">js导航菜单</span> <span class="tab_item">js选项卡特效</span> <span class="tab_item">js文字特效</span> </div> <div class="slide_content"> <div class="tabslider"> <ul> <li><a href="http://www.jsfoot.com/js/images/qh/2012-03-22/480.html">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li> <li><a href="http://www.jsfoot.com/js/images/qh/2012-03-15/422.html">js图片特效制作百叶窗滤镜轮播效果js焦点图片切换</a></li> <li><a href="http://www.jsfoot.com/js/images/cj/2012-03-14/420.html">js图片特效制作js焦点图上下滚动slider切换效果</a></li> <li><a href="http://www.jsfoot.com/js/images/cj/2011-08-08/110.html">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li> <li><a href="http://www.jsfoot.com/js/images/cj/2011-08-07/108.html">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li> <li><a href="http://www.jsfoot.com/js/images/cj/2011-08-05/104.html"> javascript滚动图片按钮控制图片左右自动滚动</a></li> <li><a href="http://www.jsfoot.com/js/images/cj/2011-07-24/80.html"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></li> </ul> <ul> <li><a href="http://www.jsfoot.com/js/menu/xl/2012-03-15/430.html">js导航菜单制作一个二级滑动导航菜单</a></li> <li><a href="http://www.jsfoot.com/js/menu/xl/2012-03-15/428.html">js横向二级导航菜单slide往下滑动动画效果js代码下载</a></li> <li><a href="http://www.jsfoot.com/js/menu/xl/2012-03-15/426.html">js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单</a></li> </ul> <ul> <li><a href="http://www.jsfoot.com/js/xxk/qh/2012-03-12/398.html">js选项卡类似js导航菜单的js tab选项卡切换效果</a></li> <li><a href="http://www.jsfoot.com/js/xxk/qh/2011-08-06/106.html">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li> </ul> <ul> <li><a href="http://www.jsfoot.com/js/letter/gd/2012-03-21/466.html">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></li> <li><a href="http://www.jsfoot.com/js/letter/gd/2012-03-19/442.html">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></li> <li><a href="http://www.jsfoot.com/js/letter/qh/2012-03-18/438.html">js文字切换特效制作焦点文字带滤镜切换效果</a></li> <li><a href="http://www.jsfoot.com/js/letter/ss/2012-03-18/436.html">js文字特效制作js文字闪烁与文字变色效果</a></li> <li><a href="http://www.jsfoot.com/js/letter/gd/2012-03-18/434.html">js文字滚动插件制作双行关联向上文字间隙滚动</a></li> </ul> </div> <br style="clear: both" /> </div> </div><!--tabbed_content end--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> //tab effects var TabbedContent = { init: function() { $(".tab_item").mouseover(function() { var background = $(this).parent().find(".moving_bg"); $(background).stop().animate({ left: $(this).position()['left'] }, { duration: 300 }); TabbedContent.slideContent($(this)); }); }, slideContent: function(obj) { var margin = $(obj).parent().parent().find(".slide_content").width(); margin = margin * ($(obj).prevAll().size() - 1); margin = margin * -1; $(obj).parent().parent().find(".tabslider").stop().animate({ marginLeft: margin + "px" }, { duration: 300 }); } } $(document).ready(function() { TabbedContent.init(); }); </script> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body,ul{margin:0; padding:0;} ul{list-style-type:none;} a img{border:none;} .clears{clear:both;} /*Tab选项卡一*/ .tab{500px; margin-top:20px;} .tab ul li{display:block; 100px; line-height:25px; border:1px solid #000; float:left; text-align:center; margin-right:2px; cursor:pointer;} .tab_hover{background:#333; color:#FFF;} .tab_cont{500px; border:1px solid #000; margin-top:5px;} </style> <script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript"></script> <script type="text/jscript"> $(document).ready(function(){ //Tab选项卡 var $_tab=$(".tab ul li"); $_tab.eq(0).addClass("tab_hover"); $(".tab_cont > div").eq(0).show().siblings().hide(); $_tab.mouseover(function(){ $(this).addClass("tab_hover").siblings().removeClass("tab_hover"); var index=$(this).index(); $(".tab_cont > div").eq(index).show().siblings().hide(); }) }); </script> </head> <body> <!--Tab选项卡--> <div class="tab"> <ul> <li>导航一</li> <li>导航二</li> <li>导航三</li> </ul> <br class="clears" /> </div> <div class="tab_cont"> <div>内容一</div> <div>内容二</div> <div>内容三</div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(function(){ $(".boxBar li").mousemove(function(){ $(".boxBar li.first").removeClass('first'); $(this).addClass('first'); $(".boxBody div.a").removeClass('a'); $(".boxBody div").eq($(this).index()).addClass('a'); }); }) </script> <style> body{ margin:0; padding:0;} .Flash{ 500px; height:260px;} .boxBar{500px; height:30px;} .boxBar li{45px; height:30px; float:left; background-color:#EEE; color:#333;margin-left:6px; line-height:30px;list-style-type:none;text-align:center;font-size:14px; font-family:Microsoft Yahei;} .boxBar li.first{background-color:#ca0002; color:#FFF;} #FiA{margin-left:0px;} .boxBody div{500px; height:230px; display:none; background-color:#CCC;} .boxBody div.a{display:block;} .boxBody img{ padding-top:7px;} </style> </head> <body> <div class="Flash"> <div class="boxBar"> <ul> <li id="FiA" class="first">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li> </ul> </div> <div class="boxBody"> <div class="a"> <a href="#">我是第一</a></div> <div> <a href="#">我是第二</a></div> <div> <a href="#">我是第三</a></div> <div> <a href="#">我是第四</a></div> <div> <a href="#">我是第五</a></div> <div> <a href="#">我是第六</a></div> </div> </div> </body> </html>