<script type="text/javascript">
(function(){
function Tab(config){
this.root = config.root,
this.menus = getElementsByClassName("tabMenu",this.root),
this.contents = getElementsByClassName("tabContent",this.root),
this.selectMenuClassname = config.selectMenuClassname || "",
this.eventType = config.eventType || "click",
this.autoPlay = config.autoPlay || false,
this.stayTime = config.stayTime || 5000,
this.callback = config.callback || null,
this.currentIndex = 0;
this._init();
}
Tab.prototype = {
_init : function(){
this._bindEvent();
this._autoPlay();
},
_bindEvent : function(){
var This = this;
for(var i = 0,n=This.menus.length;i<n;i++){
(function(n){
This.menus[n]["on"+This.eventType] = function(){
This.showItem(n);
}
})(i);
}
},
_autoPlay : function(){
if(!this.autoPlay) return;
var This = this;
setInterval(function(){
itemsCount = This.menus.length;
This.currentIndex = This.currentIndex >= itemsCount - 1 ? 0 : This.currentIndex+1 ;
This.showItem(This.currentIndex);
},This.stayTime);
},
showItem : function(index){
this._showContent(index);
if(this.selectMenuClassname){
this._focusMenu(index);
}
if(this.callback){
this.callback(index);
}
},
_showContent : function(index){
this.currentIndex = index;
for(var i=0,n=this.contents.length;i<n;i++){
if(i==index){
this.contents[i].style.display = "block";
} else {
this.contents[i].style.display = "none";
}
}
},
_focusMenu : function(index){
var menuFocused = getElementsByClassName(this.selectMenuClassname,this.root)[0];
menuFocused.className = menuFocused.className.split(this.selectMenuClassname).join(" ");
this.menus[index].className += " " + this.selectMenuClassname;
}
}
var tab1 = new Tab({root:"demo9-1",selectMenuClassname:"demo91-tabMenu-selected",autoPlay:true,stayTime:8000});
new Tab({root:"demo9-2",selectMenuClassname:"demo92-tabMenu-selected",eventType:"mouseover",callback:function(index){alert("您激活了第"+(index+1)+"个tab项");}});
document.getElementById("btn").onclick = function(){
tab1.showItem(2);
}
})();
</script>
<div id="demo9-1">
<ul>
<li class="tabMenu ">menu1</li>
<li class="tabMenu demo91-tabMenu-selected">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div style="display: none;" class="tabContent">11111<div>一一一一一一一</div></div>
<div style="display: block;" class="tabContent none">22222<div>二二二</div></div>
<div style="display: none;" class="tabContent none">33333</div>
</div>
</div>
<p><input value="激活第3个tab" id="btn" type="button"></p>
<div id="demo9-2" class="mt30">
<ul>
<li class="tabMenu demo92-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
//http://blog.moocss.com/tutorials/javascript-tutorials/1368.html
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.