您的位置：首页 > Web前端 > JavaScript

js插件编程-tab框

2018-02-08 17:26 288 查看

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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航