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);
时间： 2024-08-09 10:50:50