<!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>
