代码描述:jquery实现滑动门。jquery实现滑动门源码下载
滑动门其实就是选项卡效果,只是叫法不懂而已,下面是一个典型的滑动门代码实例。 代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> .main{ height:160px; 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; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> 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(); } </script> </head> <body> <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">51前端一</div> <div class="main_content" style="display:none;">51前端二</div> <div class="main_content" style="display:none;">51前端三</div> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能