随便写了一个tabs，源码很简单，看一下就会了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.bar{
width: 200px;
height: 20px;
}
.bar ul{
display: block;
width: 100%;
height: 100%;
}
.bar ul li{
display: inline-block;
width: 50px;
height: 20px;
float: left;
text-align: center;
line-height: 20px;
}
.bar ul li.activeList{
background: darkred;
}
.contentBox{
display: block;
width: 300px;
height: 200px;
border: 1px solid saddlebrown;
}
.contentBox .content{
width: 300px;
height: 200px;
display: none;
position: absolute;
}
.contentBox .content.active{
background: deeppink;
display: block;
}
#test{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="bar">
<ul>
<li>one</li>
<li>two</li>
<li>there</li>
<li>four</li>
</ul>
</div>
<div class="contentBox">
<div class="content">AAAAAAAAA</div>
<div class="content">BBBBBBBBB</div>
<div class="content">CCCCCCCCC</div>
<div class="content">DDDDDDDDD</div>
</div>
<div id="test">
</div>
</div>
</body>
<script>
(function (window) {
window.cycle={
id: function (id) {
return document.getElementById(id);
},
tagName: function (tagName,context) {
var context=document||context;
return context.getElementsByTagName(tagName)
},
className: function (className, context) {
var context=document||context;
return context.getElementsByClassName(className);
},
isString: function (obj) {
return Object.prototype.toString.call(obj)==="[object String]";
},
isArray: function (obj) {
return Object.prototype.toString.call(obj)==="[object Array]";
},
isObject: function (obj) {
return Object.prototype.toString.call(obj)==="[object Object]";
},
isBoolean: function (obj) {
return Object.prototype.toString.call(obj)==="[object Boolean]";
},
isNumber:function(obj){
return Object.prototype.toString.call(obj)==="[object Number]";
},
isUnderfined: function (obj) {
typeof (obj)==="underfined";
},
each: function (ele,callBack,args) {
for(var i=0;i<ele.length;i++){
callBack.call(ele[i],i,ele[i])
}
},
setAttr: function (obj, attributeName, attributeValue) {
var self=this;
if(self.isObject(attributeName)){
for(var key in attributeName){
obj.setAttribute(key,attributeName[key])
}
}else if(self.isString(attributeName)){
obj.setAttribute(attributeName,attributeValue)
}
},
getAttr: function (obj, attributeName) {
return obj.getAttribute(attributeName);
},
setStyle: function (obj, styleName, styleValue) {
var self=this;
if(obj.length){
for(var i=0;i<obj.length;i++){
self.setStyle(obj[i],styleName,styleValue);
}
return;
}
if(self.isObject(styleName)){
for(var key in styleName){
obj.style[key]=styleName[key];
}
return;
}else if(this.isString(styleName)){
obj.style[styleName]=styleValue
}
},
getStyle: function (obj, styleName) {
if(window.getComputedStyle){
return window.getComputedStyle[obj,null][styleName]
}else if(obj.currentStyle){
return obj.currentStyle[styleName]
}
},
addClass: function (obj,className) {
if("classList" in document){
obj.classList.add(className)
}else{
obj.className=obj.className+" "+className;
}
},
ifHasClass: function (obj, className) {
if("classList" in document){
obj.classList.contains(className)
}else{
return (' '+obj.className+' ').indexOf(' '+className+' ')>-1
}
},
removeClass:function(obj,className){
if(this.ifHasClass(obj,className)){
if("classList" in document){
obj.classList.remove(className)
}else{
obj.className=obj.className.replace(new RegExp('(?:^|\\s)' + className + '(?:\\s|$)'),' ');
}
}
},
toggleClass: function (obj, className) {
if(this.ifHasClass(obj,className)){
this.removeClass(obj,className);
}else{
this.addClass(obj,className);
}
},
eventHandle: function (obj,type,callback) {
if(obj.addEventListener){
obj.addEventListener(type,callback,false)
}else if(obj.attachEvent){
obj.attachEvent("on"+type,callback);
}
}
}
})(window);
var bar =cycle.className("bar");
var list=cycle.tagName("li",bar);
var contentBox=cycle.className("contentBox");
var contents=cycle.className("content",contentBox);
var test=cycle.id("test");
var tabs= function (options) {
this.bar=bar;
this.list=list;
this.contentBox=contentBox;
this.contents=contents;
this.defaults={
deplay:100,
timeSpread:500
};
this.init();
this.autoPlay();
this.mouseChange();
};
tabs.prototype={
extend: function (defaults, option) {
for(var key in defaults){
defaults[key]=option[key]
}
},
init: function () {
var self=this;
cycle.each(this.list, function (i) {
cycle.setAttr(self.list[i],"tag",i);
});
cycle.each(this.contents, function (i) {
cycle.setAttr(self.contents[i],"tag",i);
});
},
play: function (index) {
for(var i=0;i<this.list.length;i++){
cycle.removeClass(this.list[i],"activeList");
cycle.removeClass(this.contents[i],"active");
}
cycle.addClass(this.list[index],"activeList");
cycle.addClass(this.contents[index],"active");
},
autoPlay: function (index) {
var i=0;
var self=this;
if(index!=null){
i=index;
}
self.timer=setInterval(function () {
i=i+1;
i=i%4;
self.play(i);
},this.defaults.timeSpread)
},
mouseChange: function () {
var self=this;
var index=null;
for(var i=0;i<4;i++){
cycle.eventHandle(self.list[i],"mouseover", function () {
clearInterval(self.timer);
index=cycle.getAttr(this,"tag");
self.play(index);
});
cycle.eventHandle(self.list[i],"mouseout", function () {
self.autoPlay(index)
})
}
}
};
var tabs=new tabs();
</script>
</html>
