css: 复制代码 代码如下: .main { height:360px; width:290px; border:1px solid #444444; font-size:12px; color:#444444; margin:20px; } .main_top { height:30px; width:290px; line-height:30px; text-align:left; background-color:#999999; border-bottom:1px solid #444444; } .main_top ul { padding:0px; margin:0px; list-style-type:none; position:absolute; } .main_top ul li.h_qian { float:left; width:80px; text-align:center; background-color:#999999; height:30px; } .main_top ul li.h_hou { float:left; width:80px; text-align:center; background-color:#ffffff; cursor:pointer; margin-top:1px; height:30px; font-weight:bold; } .main_content { margin:10px; } 　js: 复制代码 代码如下: function tabchange(obj,p,c,q,h) { $(obj).parent().find("li").attr("class", ""+q+""); $(obj).parents("."+p+"").find("."+c+"").hide(); $(obj).attr("class", ""+h+""); var j = $(obj).index(); $(obj).parents("."+p+"").find("."+c+":eq(" + j + ")").show(); } html: 复制代码 代码如下: <div class="main"> <div class="main_top"> <ul> <li class="h_hou" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第一模块</li> <li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第二模块</li> <li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第三模块</li> </ul> </div> <div class="main_content">第1块 </div> <div class="main_content" style="display:none;">第2块 </div> <div class="main_content" style="display:none;">第3块 </div> </div> 代码很简单，不多说了，详细使用方法请参照Demo中tangtab.js里的注释。 附：在线演示：http://demo.jb51.net/js/2012/TabDemo/打包下载：TabDemo_jb51.rar

　　推荐阅读

　　javaScript 删除字符串空格多种方法小结

复制代码 代码如下: // 去掉字符串的头空格（左空格） function LTrim(str){ var i; for(i=0;i<str.length; i++) { if(str.charAt(i)!=" ") break; } str = str.substring(i,str.length); return str; } // 去掉字>>>详细阅读

本文标题：基于jquery自己写tab滑动门(通用版)

地址：http://www.17bianji.com/kaifa2/JS/23009.html

 1/2    1