tab欄切換原型封裝------彭記（013）
阿新 • • 發佈：2017-08-20
ive -i relative tel font main this 兄弟元素 posit
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);
tab欄切換原型封裝------彭記（013）