web2.0的世界里，保持页面的整洁干净 保持脚本样式的分离，编写无侵入式脚本渐为无数前端开发者追逐的前端设计的艺术，选项卡，目前市面上各样的实现方式有很多很多种，大部分的会有
<a href="javascript:void(0);" onclick="showproject(1);" >1</a>
<a href="javascript:void(0);" onclick="showproject(2);" >2</a>
....等，这样的书写方式，这样写，唯一不爽的就是其扩展性能和代码可读性，我是坚决不喜欢把javascript代码直接带进html里面去的，那么
就引入无侵入脚本书写方式，这样问题就来了，
这样，会有多重的遍历出现，很可能会出现脚本fucntion显的很臃肿的现象，更加严重的，可能多重的遍历dom树和 dom
和obj的相互引用会造成内存溢出的后果（貌似我在危言耸听，嘿嘿，不过，这也不是不可能的哈，还是小心微妙，小心为妙啊！）
好了，快12点了，我得赶快去热饭了，公司带饭的人真多，直接上代码吧，好饿 ！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> javascript简洁高性能的tab </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
.fengyu, .fenzh, .xpha, .qier, .wlbxj {width:50px;height:25px;background:#E8E8E8;display:block;float:left;margin-right:2px;border:1px solid #DBE1E6;cursor:pointer;}
.fengyu_sel, .fenzh_sel, .xpha_sel, .qier_sel, .wlbxj_sel {width:50px;height:30px;background:#C2CFDA;display:block;float:left;margin-right:2px;}
.mapcontant_box {clear:both;border:1px solid #C2CFDA;width:264px;height:150px;background:#C2CFDA}
</style>
</head>
<body>
<div class="map_menu" id="map_menu">
<span id="fengyu_m" class="fengyu_sel">tab_1</span>
<span id="fenzh_m" class="fenzh">tab_2</span>
<span id="xpha_m" class="xpha">tab_3</span>
<span id="qier_m" class="qier">tab_4</span>
<span id="wlbxj_m" class="wlbxj">tab_5</span>
<div class="mapcontant_box">
<div id="fengyu_m_box" class="fengyu_m_box">
11111111111111111111111111111
</div>
<div id="fenzh_m_box" class="fenzh_m_box">
2222222222222222222222222222
</div>
<div id="xpha_m_box" class="xpha_m_box">
33333333333333333333333333333
</div>
<div id="qier_m_box" class="qier_m_box">
44444444444444444444444444444
</div>
<div id="wlbxj_m_box" class="wlbxj_m_box">
55555555555555555555555555555
</div>
</div>
</div>
<script>
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
////tab代码正式开始
var alist=$("map_menu").getElementsByTagName("span");
window.onload=function(){
var currentItem=(function(){
var o=alist[0];
return reobj=function(obj){
var c=o;
o=obj;
return c;
}
})();
Each(alist,function(obj,i){
var item=obj;
obj.onclick=function(){
var oo=currentItem(this);//取出上一次选中的tab的obj
if(oo==this) return;
oo.className=oo.className.toString().replace("_sel","");
this.className=this.className.toString()+"_sel";
$(this.getAttribute("id")+"_box").style.display="block";
$(oo.getAttribute("id")+"_box").style.display="none";
};
});
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> javascript简洁高性能的tab </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
.fengyu, .fenzh, .xpha, .qier, .wlbxj {width:50px;height:25px;background:#E8E8E8;display:block;float:left;margin-right:2px;border:1px solid #DBE1E6;cursor:pointer;}
.fengyu_sel, .fenzh_sel, .xpha_sel, .qier_sel, .wlbxj_sel {width:50px;height:30px;background:#C2CFDA;display:block;float:left;margin-right:2px;}
.mapcontant_box {clear:both;border:1px solid #C2CFDA;width:264px;height:150px;background:#C2CFDA}
</style>
</head>
<body>
<div class="map_menu" id="map_menu">
<span id="fengyu_m" class="fengyu_sel">tab_1</span>
<span id="fenzh_m" class="fenzh">tab_2</span>
<span id="xpha_m" class="xpha">tab_3</span>
<span id="qier_m" class="qier">tab_4</span>
<span id="wlbxj_m" class="wlbxj">tab_5</span>
<div class="mapcontant_box">
<div id="fengyu_m_box" class="fengyu_m_box">
11111111111111111111111111111
</div>
<div id="fenzh_m_box" class="fenzh_m_box">
2222222222222222222222222222
</div>
<div id="xpha_m_box" class="xpha_m_box">
33333333333333333333333333333
</div>
<div id="qier_m_box" class="qier_m_box">
44444444444444444444444444444
</div>
<div id="wlbxj_m_box" class="wlbxj_m_box">
55555555555555555555555555555
</div>
</div>
</div>
<script>
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
////tab代码正式开始
var alist=$("map_menu").getElementsByTagName("span");
window.onload=function(){
var currentItem=(function(){
var o=alist[0];
return reobj=function(obj){
var c=o;
o=obj;
return c;
}
})();
Each(alist,function(obj,i){
var item=obj;
obj.onclick=function(){
var oo=currentItem(this);//取出上一次选中的tab的obj
if(oo==this) return;
oo.className=oo.className.toString().replace("_sel","");
this.className=this.className.toString()+"_sel";
$(this.getAttribute("id")+"_box").style.display="block";
$(oo.getAttribute("id")+"_box").style.display="none";
};
});
}
</script>
</body>
</html>