超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）

2025-02-27 技术教程

实例1（点击切换）：

浏览器效果：

实例2（导航栏滑过）：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>鼠标滑过jQuery选项卡切换</title><scripttype="text/javascript"src="js/jquery.min.js"></script><styletype="text/css">/*case*/.case{width:960px;margin:100pxauto;background:#fff;padding:15px;box-shadow:0010px#ccc;}.case.title{height:20px;border-bottom:3pxsolid#e7e7e7;padding-bottom:10px;}.case.titleh3{font-size:20px;font-family:"microsoftyahei";}.case.title-list{position:relative;top:6px;}.case.title-listli{width:146px;line-height:20px;text-align:center;float:left;display:inline;cursor:pointer}.case.title-listli.on{color:#ff6600;font-weight:bold;}.case.title-listspan{position:absolute;top:24px;left:0px;width:146px;height:7px;border-top:3pxsolid#ff6600;overflow:hidden;text-align:center;}.product{position:relative;display:none;margin-top:20px;height:auto}.productul{}.product-wrap.show{display:block;}</style>//<![CDATA[<scripttype="text/javascript">$(function(){//设计案例切换$('.title-listli').click(function(){varliindex=$('.title-listli').index(this);$(this).addClass('on').siblings().removeClass('on');$('.product-wrapdiv.product').eq(liindex).fadeIn(10).siblings('div.product').hide();varliWidth=$('.title-listli').width();$('.case.title-listspan').stop(false,true).animate({'left':liindex*liWidth+'px'},300);});});</script>//]]></head><body><divclass="case"><divclass="title"><ulclass="title-list"><liclass="on">LOGO</li><li>宣传单</li><li>画册</li><span><</span></ul></div><divclass="product-wrap"><divclass="productshow"><ulclass="cf"><liclass="ml0"><ahref="http://www.17sucai.com"class="imgwrap"><imgsrc="p_w_picpaths/1.jpg"></a><pclass="mt10"><ahref="http://www.17sucai.com">站长素材网站logo...</a></p><pclass="pb10">行业类别：艺术摄影,文化体育</p></li><li><ahref="http://www.17sucai.com"class="imgwrap"><imgsrc="p_w_picpaths/1.jpg"></a><pclass="mt10"><ahref="http://www.17sucai.com">深圳达文影视传媒有限公司logo...</a></p><pclass="pb10">行业类别：艺术摄影,文化体育</p></li><li><ahref="http://www.17sucai.com"class="imgwrap"><imgsrc="p_w_picpaths/1.jpg"></a><pclass="mt10"><ahref="http://www.17sucai.com">深圳达文影视传媒有限公司logo...</a></p><pclass="pb10">行业类别：艺术摄影,文化体育</p></li><li><ahref="http://www.17sucai.com"class="imgwrap"><imgsrc="p_w_picpaths/1.jpg"></a><pclass="mt10"><ahref="http://www.17sucai.com">深圳达文影视传媒有限公司logo...</a></p><pclass="pb10">行业类别：艺术摄影,文化体育</p></li></ul></div><divclass="product">2</div><divclass="product">3</div></div></div></body></html>

浏览器效果：