javascript实现tab标签组件3
添加自动切换标签效果：
View Code
<style type="text/css">
.tab{width:400px;text-align:left;margin:10px;}
.tab-menuWrapper{padding-left:20px;}
.tab-menuWrapper li{float:left;display:inline;border:1px solid #333;border-bottom:none;margin-right:5px;cursor:pointer;}
.tab-contnetWrapper{border:1px solid #333;clear:both;paddding:5px;}
.tab-currentMenu1{background:#000;color:#fff;}
.tab-currentMenu2{background:#f00;color:#fff;}
.tab-currentMenu3{background:#00f;color:#fff;}
</style>
</head>
<body>
<div class="tab J_tab">
<ul class="tab-menuWrapper">
<li class="J_tab-menu tab-currentMenu1">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contnetWrapper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="J_tab-content" style="display:none;">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none;">
content3
</div>
</div>
</div>
<div class="tab J_tab">
<ul class="tab-menuWrapper">
<li class="J_tab-menu tab-currentMenu2">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contnetWrapper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="J_tab-content" style="display:none;">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none;">
content3
</div>
</div>
</div>
<div class="tab J_tab">
<ul class="tab-menuWrapper">
<li class="J_tab-menu tab-currentMenu3">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contnetWrapper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="J_tab-content" style="display:none;">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none;">
content3
</div>
</div>
</div>
<script type="text/javascript">
var GLOBAL = {};
GLOBAL.namespace = function(str){
var arr = str.split('.'),o = GLOBAL;
for(i = (arr[0] == GLOBAL)?1:0;i<arr.length;i++){
o[arr[i]] = o[arr[i]]||{};
o = o[arr[i]];
}
}
GLOBAL.namespace("Dom");
GLOBAL.Dom.getElementsByClassName = function(str,root,tag){
if(root){
root = (typeof root == "string")?document.getElementById(root):root;
}else{
root = document.body;
}
tag = tag||'*';
var els = root.getElementsByTagName(tag),arr = [];
for(var i=0,leng = els.length;i<leng;i++){
var k = els[i].className.split(' ');
for(j = 0,len = k.length;j<len;j++){
if(k[j] == str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
GLOBAL.Dom.addClass = function(node,str){
var reg = new RegExp("(^|\\s+)"+str);
if(!reg.test(node.className)){
node.className = node.className+" "+str;
}
}
GLOBAL.Dom.removeClass = function(node,str){
var reg = new RegExp("(^|\\s+)"+str);
if(reg.test(node.className)){
node.className = node.className.replace(reg,"");
}
}
GLOBAL.namespace("Event");
GLOBAL.Event.on = function(node,eventType,handler,scope){
//scope用来设置handler中this的指针，默认指向node节点
Node = (typeof node == "string")?document.getElementById(node):node;
scope = scope || Node;
if(node.addEventListener){
node.addEventListener(eventType,function(){handler.apply(scope,arguments)},false);
}else if(node.attachEvent){
node.attachEvent("on"+eventType,function(){handler.apply(scope,arguments)});
}else{
node['on'+eventType] = function(){handler.apply(scope,arguments)};
}
}
function setTab(root,currentClass,trigger,handler,autoPlay,playTime){
//取得标签及内容的节点，并以数组的形式保存在变量中
var tabMenus = GLOBAL.Dom.getElementsByClassName('J_tab-menu',root),
tabContents = GLOBAL.Dom.getElementsByClassName('J_tab-content',root);
//如果不传入激活类型，默认激活类型为点击
trigger = trigger||"click";
//如果不传入playTime，默认是1000毫秒
playTime = playTime||1000;
var currentIndex = 0;
//用来操作内容模块及标签样式
function showItem(n){
for(var j=0,len = tabContents.length;j<len;j++){
tabContents[j].style.display="none";
}
tabContents[n].style.display = "block";
if(currentClass){
var currentMenu = GLOBAL.Dom.getElementsByClassName(currentClass,root)[0];
if(currentMenu){
GLOBAL.Dom.removeClass(currentMenu,currentClass);
}
GLOBAL.Dom.addClass(tabMenus[n],currentClass);
}
}
//自动切换函数
function autoHandler(){
currentIndex++;
if(currentIndex>=tabMenus.length){
currentIndex = 0;
}
showItem(currentIndex);
}
if(autoPlay){
setInterval(autoHandler,playTime)
}
//手动切换函数，遍历数组，让标签监听click事件
for(var i=0,leng = tabMenus.length;i<leng;i++){
tabMenus[i]._index = i;
GLOBAL.Event.on(tabMenus[i],trigger,function(){
showItem(this._index);
},tabMenus[i]);
}
}
var tabs = GLOBAL.Dom.getElementsByClassName('J_tab');
setTab(tabs[0],"tab-currentMenu1",null,function(index){alert("您激活的是第"+(index+1)+"个标签")});
setTab(tabs[1],"tab-currentMenu2","mouseover",null,true);
setTab(tabs[2],"tab-currentMenu3",null);
</script>
在上面的代码中，在每次调用时传入的参数会出现setTab(tabs[1],null,null,null,true);这种情况看起来很不优雅，下面通过hash对象对于传参进行修改：
View Code
<style type="text/css">
.tab{width:400px;text-align:left;margin:10px;}
.tab-menuWrapper{padding-left:20px;}
.tab-menuWrapper li{float:left;display:inline;border:1px solid #333;border-bottom:none;margin-right:5px;cursor:pointer;}
.tab-contnetWrapper{border:1px solid #333;clear:both;paddding:5px;}
.tab-currentMenu1{background:#000;color:#fff;}
.tab-currentMenu2{background:#f00;color:#fff;}
.tab-currentMenu3{background:#00f;color:#fff;}
</style>
</head>
<body>
<div class="tab J_tab">
<ul class="tab-menuWrapper">
<li class="J_tab-menu tab-currentMenu1">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contnetWrapper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="J_tab-content" style="display:none;">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none;">
content3
</div>
</div>
</div>
<div class="tab J_tab">
<ul class="tab-menuWrapper">
<li class="J_tab-menu tab-currentMenu2">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contnetWrapper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="J_tab-content" style="display:none;">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none;">
content3
</div>
</div>
</div>
<div class="tab J_tab">
<ul class="tab-menuWrapper">
<li class="J_tab-menu tab-currentMenu3">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contnetWrapper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="J_tab-content" style="display:none;">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none;">
content3
</div>
</div>
</div>
<script type="text/javascript">
var GLOBAL = {};
GLOBAL.namespace = function(str){
var arr = str.split('.'),o = GLOBAL;
for(i = (arr[0] == GLOBAL)?1:0;i<arr.length;i++){
o[arr[i]] = o[arr[i]]||{};
o = o[arr[i]];
}
}
GLOBAL.namespace("Dom");
GLOBAL.Dom.getElementsByClassName = function(str,root,tag){
if(root){
root = (typeof root == "string")?document.getElementById(root):root;
}else{
root = document.body;
}
tag = tag||'*';
var els = root.getElementsByTagName(tag),arr = [];
for(var i=0,leng = els.length;i<leng;i++){
var k = els[i].className.split(' ');
for(j = 0,len = k.length;j<len;j++){
if(k[j] == str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
GLOBAL.Dom.addClass = function(node,str){
var reg = new RegExp("(^|\\s+)"+str);
if(!reg.test(node.className)){
node.className = node.className+" "+str;
}
}
GLOBAL.Dom.removeClass = function(node,str){
var reg = new RegExp("(^|\\s+)"+str);
if(reg.test(node.className)){
node.className = node.className.replace(reg,"");
}
}
GLOBAL.namespace("Event");
GLOBAL.Event.on = function(node,eventType,handler,scope){
//scope用来设置handler中this的指针，默认指向node节点
Node = (typeof node == "string")?document.getElementById(node):node;
scope = scope || Node;
if(node.addEventListener){
node.addEventListener(eventType,function(){handler.apply(scope,arguments)},false);
}else if(node.attachEvent){
node.attachEvent("on"+eventType,function(){handler.apply(scope,arguments)});
}else{
node['on'+eventType] = function(){handler.apply(scope,arguments)};
}
}
function setTab(config){
//hash对象传参
var root = config.root;
var currentClass = config.currentClass;
var trigger = config.trigger||"click";
var handler = config.handler;
var autoPlay = config.autoPlay;
var playTime = config.playTime||1000;
//取得标签及内容的节点，并以数组的形式保存在变量中
var tabMenus = GLOBAL.Dom.getElementsByClassName('J_tab-menu',root),
tabContents = GLOBAL.Dom.getElementsByClassName('J_tab-content',root);
//如果不传入激活类型，默认激活类型为点击
//如果不传入playTime，默认是1000毫秒
var currentIndex = 0;
//用来操作内容模块及标签样式
function showItem(n){
for(var j=0,len = tabContents.length;j<len;j++){
tabContents[j].style.display="none";
}
tabContents[n].style.display = "block";
if(currentClass){
var currentMenu = GLOBAL.Dom.getElementsByClassName(currentClass,root)[0];
if(currentMenu){
GLOBAL.Dom.removeClass(currentMenu,currentClass);
}
GLOBAL.Dom.addClass(tabMenus[n],currentClass);
}
}
//自动切换函数
function autoHandler(){
currentIndex++;
if(currentIndex>=tabMenus.length){
currentIndex = 0;
}
showItem(currentIndex);
}
if(autoPlay){
setInterval(autoHandler,playTime)
}
//手动切换函数，遍历数组，让标签监听click事件
for(var i=0,leng = tabMenus.length;i<leng;i++){
tabMenus[i]._index = i;
GLOBAL.Event.on(tabMenus[i],trigger,function(){
showItem(this._index);
},tabMenus[i]);
}
}
var tabs = GLOBAL.Dom.getElementsByClassName('J_tab');
setTab({root:tabs[1],currentClass:"tab-currentMenu2",autoPlay:true});
</script>
面象对象改写代码：
View Code
<style type="text/css">
.tab{width:400px;text-align:left;margin:10px;}
.tab-menuWrapper{padding-left:20px;}
.tab-menuWrapper li{float:left;display:inline;border:1px solid #333;border-bottom:none;margin-right:5px;cursor:pointer;}
.tab-contnetWrapper{border:1px solid #333;clear:both;paddding:5px;}
.tab-currentMenu1{background:#000;color:#fff;}
.tab-currentMenu2{background:#f00;color:#fff;}
.tab-currentMenu3{background:#00f;color:#fff;}
</style>
</head>
<body>
<div class="tab J_tab">
<ul class="tab-menuWrapper">
<li class="J_tab-menu tab-currentMenu1">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contnetWrapper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="J_tab-content" style="display:none;">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none;">
content3
</div>
</div>
</div>
<div class="tab J_tab">
<ul class="tab-menuWrapper">
<li class="J_tab-menu tab-currentMenu2">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contnetWrapper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="J_tab-content" style="display:none;">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none;">
content3
</div>
</div>
</div>
<div class="tab J_tab">
<ul class="tab-menuWrapper">
<li class="J_tab-menu tab-currentMenu3">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contnetWrapper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="J_tab-content" style="display:none;">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none;">
content3
</div>
</div>
</div>
<script type="text/javascript">
var GLOBAL = {};
GLOBAL.namespace = function(str){
var arr = str.split('.'),o = GLOBAL;
for(i = (arr[0] == GLOBAL)?1:0;i<arr.length;i++){
o[arr[i]] = o[arr[i]]||{};
o = o[arr[i]];
}
}
GLOBAL.namespace("Dom");
GLOBAL.Dom.getElementsByClassName = function(str,root,tag){
if(root){
root = (typeof root == "string")?document.getElementById(root):root;
}else{
root = document.body;
}
tag = tag||'*';
var els = root.getElementsByTagName(tag),arr = [];
for(var i=0,leng = els.length;i<leng;i++){
var k = els[i].className.split(' ');
for(j = 0,len = k.length;j<len;j++){
if(k[j] == str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
GLOBAL.Dom.addClass = function(node,str){
var reg = new RegExp("(^|\\s+)"+str);
if(!reg.test(node.className)){
node.className = node.className+" "+str;
}
}
GLOBAL.Dom.removeClass = function(node,str){
var reg = new RegExp("(^|\\s+)"+str);
if(reg.test(node.className)){
node.className = node.className.replace(reg,"");
}
}
GLOBAL.namespace("Event");
GLOBAL.Event.on = function(node,eventType,handler,scope){
//scope用来设置handler中this的指针，默认指向node节点
Node = (typeof node == "string")?document.getElementById(node):node;
scope = scope || Node;
if(node.addEventListener){
node.addEventListener(eventType,function(){handler.apply(scope,arguments)},false);
}else if(node.attachEvent){
node.attachEvent("on"+eventType,function(){handler.apply(scope,arguments)});
}else{
node['on'+eventType] = function(){handler.apply(scope,arguments)};
}
}
function Tab(config){
//hash对象传参
this._root = config.root;
this._currentClass = config.currentClass;
var trigger = config.trigger||"click";
this.handler = config.handler;
var autoPlay = config.autoPlay;
var playTime = config.playTime||1000;
//取得标签及内容的节点，并以数组的形式保存在变量中
this._tabMenus = GLOBAL.Dom.getElementsByClassName('J_tab-menu',this._root),
this._tabContents = GLOBAL.Dom.getElementsByClassName('J_tab-content',this._root);
//如果不传入激活类型，默认激活类型为点击
//如果不传入playTime，默认是1000毫秒
this.currentIndex = 0;
var This = this;
if(autoPlay){
setInterval(function(){This._autoHandler()},playTime)
}
//手动切换函数，遍历数组，让标签监听click事件
for(var i=0,leng = this._tabMenus.length;i<leng;i++){
this._tabMenus[i]._index = i;
GLOBAL.Event.on(this._tabMenus[i],trigger,function(){
This.showItem(this._index);
this.currentIndex = this._index;
},this._tabMenus[i]);
}
}
Tab.prototype={
showItem:function(n){
for(var j=0,len = this._tabContents.length;j<len;j++){
this._tabContents[j].style.display="none";
}
this._tabContents[n].style.display = "block";
if(this._currentClass){
var currentMenu = GLOBAL.Dom.getElementsByClassName(this._currentClass,this._root)[0];
if(currentMenu){
GLOBAL.Dom.removeClass(currentMenu,this._currentClass);
}
GLOBAL.Dom.addClass(this._tabMenus[n],this._currentClass);
if(this.handler){
this.handler(n);
}
}
},
_autoHandler:function(){
this.currentIndex++;
if(this.currentIndex>=this._tabMenus.length){
this.currentIndex = 0;
}
this.showItem(this.currentIndex);
}
}
var tabs = GLOBAL.Dom.getElementsByClassName('J_tab');
new Tab({root:tabs[0],currentClass:"tab-currentMenu1",trigger:"mouseover"})
new Tab({root:tabs[1],currentClass:"tab-currentMenu2",autoPlay:true});
new Tab({root:tabs[2],currentClass:"tab-currentMenu3",handler:function(index){alert(index+1)}});
</script>
