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==thisreturn;
                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>

 

 

 posted on 2009-09-10 10:38 落叶满长沙 阅读(...) 评论(...) 编辑 收藏