Js Tab页（一）

<script type="text/javascript"> 

function tabclick(obj){ 

    if(obj.className=='cur')return; 

    var idx; 

    for(var n=0; n<obj.parentNode.childNodes.length; n++){ 

        obj.parentNode.childNodes[n].className=""; 

        if(obj==obj.parentNode.childNodes[n])idx=n; 

    } 

    obj.className="cur"; 

    var pc = obj.parentNode.nextSibling; 

    while(pc.nodeType==3)pcpc=pc.nextSibling; 

    for(var n=0; n<pc.childNodes.length; n++){ 

        pc.childNodes[n].className="hdn"; 

    } 

    pc.childNodes[idx].className=""; 

} 

</script> 

<style type="text/css"> 

.debug{ 

    border:1px solid red; 

} 

.hdn{ 

    display:none; 

} 

.thistab ul.tabbar,ul.tabpage{ 

    list-style-type:none; 

    margin:0; 

    font-size:12px; 

    padding:0; 

} 

.thistab ul.tabbar{ 

   

    height:24px; 

} 

.thistab ul.tabbar li{ 

    float:left;

background:#fefefe;

background:-moz-linear-gradient(top, #fefefe, #ededed);        

background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));

background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));

border:1px solid #ccc;

padding:5px 0;

width:100px;

text-align:center;

margin-left:-1px;

position:relative;

cursor:pointer;

} 

.thistab ul.tabbar li.cur{ 

    border-bottom:none;

background:#21344A;

       color:#FFFFFF;; 

} 

.thistab ul.tabpage{ 

    border-style:ridge; 

    border-color:#dceefd;  

    border-width:2px 2px 2px 2px; 

    height:429px; 

    overflow:hidden; 

} 

</style> 

 

<div class="thistab">

<ul class="tabbar">   

        <li  class="cur" onclick="tabclick(this)">待处理列表</li>

         <li onclick="tabclick(this)">待审阅列表</li>

         <li onclick="tabclick(this)">已提交列表</li>

         <li onclick="tabclick(this)">已处理列表</li>

</ul> 

<ul class="tabpage"> 

    <li  style=" border-width:0;overflow-y:auto;height:427px;"> <!--Tab内容--> </li> 

    <li class="hdn"  style=" border-width:0;overflow-y:auto;height:427px;" ><!--Tab内容--></li> 

    <li class="hdn"   style=" border-width:0;overflow-y:auto;height:427px;" ><!--Tab内容--></li> 

    <li class="hdn"    style=" border-width:0;overflow-y:auto;height:427px;"> <!--Tab内容--> </li> 

</ul> 

</div>