该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。
此插件旨在实现目前较为流行的tab标签页或滑动门特效，在此插件中默认使用的是鼠标滑过事件，您也可以根据自己的实际需求将滑过事件hover改为点击事件click。整体代码如下：
<!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>tab标签页/滑动门</title> <style> *{margin:0;padding:0;font-size:12px;} li{list-style:none;} .tabs{margin:20px;width:400px;height:250px;} .tabs_nav{margin-left:1px;} .tabs_nav li{float:left;border:1px solid #ddd;border-bottom:none;width:90px;height:25px;line-height:25px;text-align:center;cursor:pointer;margin-left:-1px;} .tabs_nav li.active{background:#ccc;} .tabs_content{clear:both;display:none;border:1px solid #ddd;height:200px;padding:10px;} </style> <script type="text/javascript" src="../../jquery-1.7.1.js"></script> </head> <body> <div class="tabs"> <ul class="tabs_nav"> <li>商品详情</li> <li>商品参数</li> <li>商品评论</li> </ul> <div class="tabs_content">这里是商品详情</div> <div class="tabs_content">这里是商品参数</div> <div class="tabs_content">这里是商品评论</div> </div> <script> /* * tabs 0.1 * Copyright (c) 2014 tnnyang http://tnnyang.cnblogs.com/ * Dependence jquery-1.7.1.js */ ;(function($){ $.fn.tabs = function(options){ //默认参数 var defaults = { tabsContent:'tabscontent', Class:'active', Event:'hover' }; var opts = $.extend(defaults,options); this.each(function(){ var obj = $(this); var $content = opts.tabsContent, $class = opts.Class, $event = opts.Event; obj.find("li").first().addClass($class); obj.children($content).first().show(); obj.find("li").on($event,function(){ $(this).addClass($class).siblings().removeClass($class); var $index = obj.find("li").index(this); $(this).parent().siblings(opts.tabsContent).eq($index).show().siblings(opts.tabsContent).hide(); }); }); }; })(jQuery) </script> <script> $(function(){ $(".tabs").tabs({ tabsContent:'.tabs_content', //设置滑动门的详情 Class:'active' }); }) </script> </body> </html>
原生js实现方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} li{list-style:none;} #tabs{width:300px;margin:50px;border:1px solid #ddd;} #tabs ul{overflow:hidden;margin-bottom:10px;} #tabs li{float:left;width:100px;margin-left:33px;height:35px;line-height:35px;text-align:center;border-bottom:2px solid #999;cursor:pointer;} #tabs li.active{border-bottom:#f00 2px solid;} .tabs_con{margin:0 33px;display:none;} .tabs_con.active{display:block;} </style> </head> <body> <div id="tabs"> <ul> <li class="active">周排行</li> <li>月排行</li> </ul> <div class="tabs_con active">这里是周排行</div> <div class="tabs_con">这里是月排行</div> </div> <script> window.onload = function(){ //标题中的 li var lis = document.getElementById("tabs").getElementsByTagName("li"); //给标题中的所有li 添加事件 for(var i = 0;i<lis.length;i++){ lis[i].num = i; //当前是第几个 li lis[i].onclick=function(){ var k = this.num //当前的li是第几个 //内容中的 div块 var divs = document.getElementsByClassName("tabs_con"); //把所有的div消失并去掉所有li标签的class for(var j = 0;j<divs.length;j++){ divs[j].style.display = "none"; lis[j].className = ""; } //显示指定的div并给当前的li标签添加class divs[k].style.display = "block"; this.className = "active"; }; }; }; </script> </body> </html>