JS代码
(function (w) { ???//tab对象 ???function Tab(config) { ???????//定义变量，防止变量污染 ???????this.tabMenus=null; ???????this.tabMains=null; ???????if(config){ ???????????this._init(config); ???????} ???} ???//为原型添加属性，防止内存重复创建 ???Tab.prototype={ ???????_init:function (config) { ???????????//初始化元素 ???????????this.initElements(config); ???????????this.initEvent(); ???????????if(config.auto){ ???????????????this.autoPlay(); ???????????} ???????}, ???????initElements:function (config) { ???????????var tabMenu=document.getElementById(config.tabMenu); ???????????var tabMain=document.getElementById(config.tabMain); ???????????this.tabMenus=tabMenu.children; ???????????this.tabMains=tabMain.children; ???????}, ???????initEvent:function () { ???????????for(var i=0;i<this.tabMenus.length;i++){ ???????????????var li=this.tabMenus[i]; ???????????????li.index=i; ???????????????//定义this变量存储，闭包环境可以调用此变量 ???????????????var that=this; ???????????????li.onclick=function () { ???????????????????that.change(this); ???????????????} ???????????} ???????}, ???????change:function (tabMenu) { ???????????for(var i=0;i<this.tabMenus.length;i++){ ???????????????this.tabMenus[i].className=""; ???????????????this.tabMains[i].className="main"; ???????????} ???????????tabMenu.className="active"; ???????????this.tabMains[tabMenu.index].className+=" select"; ???????}, ???????autoPlay:function () { ???????????var index=0; ???????????var that=this; ???????????setInterval(function () { ???????????????index++; ???????????????if(index>=that.tabMenus.length){ ???????????????????index=0; ???????????????} ???????????????that.change(that.tabMenus[index]); ???????????},2000); ???????} ???} ???//将插件暴露给windows ???w.Tab=Tab;})(window)HTML代码
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" type="text/css" href="tab.css"></head><body> ???<div class="wrapper"> ???????<ul class="tab" id="menu"> ???????????<li class="active">国际大牌<span>◆</span></li> ???????????<li>国妆名牌<span>◆</span></li> ???????????<li>清洁用品<span>◆</span></li> ???????????<li>男士精品</li> ???????</ul> ???????<div class="products" id="main"> ???????????<div class="main select"><a href="#"><img src="imgs/guojidapai.jpg"></a></div> ???????????<div class="main"><a href="#"><img src="imgs/guozhuangmingpin.jpg"></a></div> ???????????<div class="main"><a href="#"><img src="imgs/qingjieyongpin.jpg"></a></div> ???????????<div class="main"><a href="#"><img src="imgs/nanshijingpin.jpg"></a></div> ???????</div> ???</div></body><script type="text/javascript" src="tab.js"></script><script> ???var tb=new Tab({ ???????tabMenu:"menu", ???????tabMain:"main", ???????auto:true ???});</script></html>css代码
html,body,ul,li { ????margin: 0; ????padding: 0; } ul{ ????list-style: none; } .wrapper { ????margin: 0 auto; ????width: 1000px; ????height: 475px; ????margin-top: 100px; } .wrapper .tab { ????width: 320px; ????height: 36px; ????border: 1px solid #ddd; ????border-bottom: 0; } .wrapper .tab li{ ????float:left; ????width: 80px; ????height: 34px; ????line-height: 34px; ????cursor: pointer; ????text-align: center; ????border-top: 4px solid #fff; ????position: relative; } .wrapper .tab .active{ ????border-top: 4px solid red; } .wrapper .tab span{ ????width: 1px; ????height: 14px; ????background-color: #ddd; ????position: absolute; ????right:0px; ????top:10px; ????overflow: hidden; } .wrapper .products{ ????width: 1002px; ????height: 476px; ????border:1px solid #ddd; } .wrapper .products .main{ ????float: left; ????display: none; } .wrapper .products .select{ ????display: block; }js插件编程-tab框
原文地址：https://www.cnblogs.com/zhuyapeng/p/8432460.html