以下是封装函数：
// id：最外边大盒的id名
function tab(id,ev){
var oWrap = document.getElementById(id);
var aLi = oWrap.getElementsByTagName("li");
var aDiv = oWrap.getElementsByTagName("div");
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i][ev]=function(){
// [ev]:触发的是什么事件，比如.onclick，这里用[参数]，中括号中可以传递不同的事件
for(var i=0;i<aLi.length;i++){
aLi[i].className="";
aDiv[i].className="";
}
this.className="active";
aDiv[this.index].className="show";
}
}
}
以下是格式：
<body>
<div class="wrap" id="tab">
<ul >
<li class="active">新闻</li>
<li>体育</li>
<li>财经</li>
</ul>
<div class="show">NewsNewsNewsNewsNewsNews</div>
<div>playplayplayplayplayplay</div>
<div>financefinancefinancefinance</div>
</div>
<div class="wrap" id="tab2">
<ul >
<li class="active">新闻</li>
<li>体育</li>
<li>财经</li>
</ul>
<div class="show">NewsNewsNewsNewsNewsNews</div>
<div>playplayplayplayplayplay</div>
<div>financefinancefinancefinance</div>
</div>
</body>
以下是css样式及函数调用：
<style>
body,ul,li,div{margin:0; padding:0;}
ul{list-style: none;}
.wrap{width:300px;height:300px;margin:100px auto 0;border:1px #ccc solid;}
.wrap ul{height:30px;background: #CCCCCC;}
.wrap ul li{padding:0 20px;float:left;font:14px/30px "微软雅黑";line-height: 30px;}
.wrap ul .active{background: #fff;border-top:3px #FF1493 solid;line-height: 27px;}
.wrap div{display: none;}
.wrap .show{display: block;}
</style>
<script src="js/tab_js.js" type="text/javascript"></script>
<script>
window.οnlοad=function(){
tab("tab","onclick");
tab("tab2","onmouseover")
}
</script>
以后只需调用函数就可以了，可以将事件形式以实参的方式传进去，更改事件触发属性
950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
