61,129
社区成员




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {padding:0; margin:0;}
img {border:none;}
ul,ol {list-style:none;}
a {text-decoration:none;}
.warp_tab {position:relative;}
.tab_btn {position:absolute; top:0; left:0; height:25px; width:230px; background:#CCC;}
.tab_btn div {display:block; float:left; background:#0CC; margin-left:10px; line-height:25px;}
.tab_btn div.active {background:yellow;}
.tab_content {height:200px; width:230px; position:absolute; top:30px; left:0;}
.tab_content div {position:absolute; top:0; left:0; width:100%; height:100%; background:#CCC;}
</style>
<script>
var getByClass = function(obj, sCls){
var aEle=obj.getElementsByTagName("*");
var aResult=[];
var re=new RegExp("\\b"+sCls+"\\b", "i");
for(var i=0;i<aEle.length;i++){
if(re.test(aEle[i].className))aResult.push(aEle[i]);
}
return aResult;
}
function TabSwitch(){
this.initialize.apply(this, arguments);
}
TabSwitch.prototype={
initialize : function(options){
this.setOptions(options);
for(var i=0;i<this.options.nav.length;i++){
var that=this;
this.options.nav[i].onmouseover=function(i){
return function(){
that.fnActive(i);
}
}(i);
}
},
fnActive : function(num){
for(var i=0;i<this.options.nav.length;i++){
this.options.nav[i].className="";
this.options.content[i].style.display="none";
}
this.options.nav[num].className="active";
this.options.content[num].style.display="block";
},
setOptions : function(options){
this.options={
nav : this.aNav,
content :this.aContent
};
for(var p in options)this.options[p]=options[p];
}
};
window.onload=function(){
aNav=getByClass(document.body, "tab_btn")[0].getElementsByTagName("div");
aContent=getByClass(document.body, "tab_content")[0].getElementsByTagName("div");
var t1= new TabSwitch({nav:aNav, content:aContent});
};
</script>
</head>
<body>
<div id="wrap_tab">
<div class="tab_btn">
<div class="active">财经</div>
<div>经济</div>
<div>政治</div>
<div>体育</div>
<div>娱乐</div>
</div>
<div class="tab_content">
<div style="display:block;">1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
</div>
</div>
</body>
</html>