tab栏切换原型封装------彭记（013）
tab栏切换原型封装
<body> <div class="wrapper" id="wrapper"> <ul class="tab" id="tab-menu"> <li class="tab-item active">文字1<span>◆</span></li> <li class="tab-item">文字2<span>◆</span></li> <li class="tab-item">文字3<span>◆</span></li> <li class="tab-item">文字4</li> </ul> <div class="products" id="tab-main"> <div class="main selected"> <a href="###"><img src="图片1" alt=""/></a> </div> <div class="main"> <a href="###"><img src="图片2" alt=""/></a> </div> <div class="main"> <a href="###"><img src="图片3" alt=""/></a> </div> <div class="main"> <a href="###"><img src="图片4" alt=""/></a> </div> </div> </div> <script src="../js/jquery-1.7.2.min.js"></script> <script> //jq实现 /*$("#tab-menu").on('click','li',function(){ /!* 为当前单击的tab导航项添加active样式，同时删除兄弟元素的active元素*!/ $(this).addClass("active").siblings("li").removeClass("active"); /!*获取当前被点击的导航项的索引*!/ var index = $(this).index(); /!*为当前导航项对应的内容面板添加selected样式，同时清除内容面板兄弟元素的样式*!/ $("#tab-main >.main").eq(index).addClass("selected").siblings("div").removeClass("selected"); })*/ var tab = new MyTab({ tab_menu:"tab-menu", tab_main:"tab-main", autoPlay:true }); </script> </body>
css * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper { width: 1000px; height: 475px; margin: 0 auto; margin-top: 100px; } .tab { border: 1px solid #ddd; border-bottom: 0; height: 36px; width: 320px; } .tab li { position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer; border-top: 4px solid #fff; } .tab span { position: absolute; right: 0; top: 10px; background: #ddd; width: 1px; height: 14px; overflow: hidden; } .products { width: 1002px; border: 1px solid #ddd; height: 476px; } .products .main { float: left; display: none; } .products .main.selected { display: block; } .tab li.active { border-color: red; border-bottom: 0; }
/*js
--有用到沙箱模式*/ /*1.获取标签页导航项 * 2.循环为标签页导航项添加点击事件 * 3.为当前被点击的导航项添加active样式，同时为兄弟元素移除active样式*/ /*1.获取当前需要展示的内容面板的索引 * 2.为当前索引的内容面板添加selected样式 * 3.为当前索引的内容面板的兄弟元素移除selected样式*/ (function(window){ function MyTab(option){ this.tab_items = null; this.content_items = null; this.index = 0; /*code a little debug a little*/ this.init(option); } /*封装功能到原型*/ MyTab.prototype = { constructor:MyTab, /*初始化*/ init:function(option){ this.getElements(option); this.registerEvent(); if(option.autoPlay){ /*实现自动轮播*/ this.autoPlay(); } }, getElements:function(option){ /*获取标签页导航项*/ this.tab_items = document.getElementById(option.tab_menu).children; /*获取所有内容面板*/ this.content_items = document.getElementById(option.tab_main).children; }, registerEvent:function(){ /*将当前对象存储在_this变量中*/ var _this = this; /*循环为标签页导航项添加点击事件*/ for(var i=0;i<this.tab_items.length;i++){ var item = this.tab_items[i]; /*存储索引*/ item.index = i; item.onclick = function(){ _this.index = this.index; _this.toggle(this); } } }, autoPlay:function(){ var _this = this; setInterval(function(){ _this.toggle(_this.tab_items[_this.index ++ % 4]); },2000); }, toggle:function(dom){ /*这里的this主是当前构造函数创建的对象*/ for(var j =0; j < this.tab_items.length;j++){ /*为当前被点击的导航项添加active样式，同时为兄弟元素移除active样式*/ this.tab_items[j].classList.remove("active"); /*为当前索引的内容面板的兄弟元素移除selected样式*/ this.content_items[j].classList.remove("selected"); } /*需要当前被点击的元素*/ dom.classList.add("active"); /*操作内容面板*/ /*为当前索引的内容面板添加selected样式*/ this.content_items[dom.index].classList.add("selected"); } } /*提供外部访问的接口*/ window.MyTab = MyTab; })(window);
