DIV 层切换

<html>
    <head>
        <title>tab控件</title>
 
 

    </head>
    <body>
       
       
        
        
        
        
<div class="bdtg-tit">
   <ul id="oUlTab">
 <li class="on"><a href="#"><p>a</p></a></li>
 
 
 <li><a href="#"><p>b</p></a></li>
 
 
 <li><a href="#"><p>c</p></a></li>
</ul>
</div>


<div class="bq_d" id="oDivTab1">
<div class="bq_n">
<div class="bdtg-list">
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td i Align="top">
  content1
  </td>
 </tr>
</table>
</div>

</div>
</div>


<div class="bq_d" id="oDivTab2" style="DISPLAY: none">
<div class="bq_n">

 <div class="bdtg-list">
 
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td  vAlign="top">
   content2
  </td>
 </tr>
</table>
 
 
</div> 
</div>
</div> 
 
 
<div class="bq_d" id="oDivTab100" style="DISPLAY: none">
<div class="bq_n">
<div class="bdtg-list">
 
 
<table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td   vAlign="top">
   content3
   
   </td>
 </tr>
</table>
 
 
 
</div>
</div>
</div>
 
 


       
        </body>
       
</html>

<SCRIPT language=JavaScript>
 <!--

    var nFocus = 0;
    var bFlag = false;
    var aLiTab, aDivTab;
    function c1() {
   
   
   
            var $ = function c($) {
                return document.getElementById($);
            };
       
       
           aLiTab = $("oUlTab").getElementsByTagName("li");
           aDivTab = [$("oDivTab1"), $("oDivTab2"), $("oDivTab100")];
       
        for (var i = 0; i < aLiTab.length; i++) {
            (
           
            function(i) {
                            var t = aLiTab[i];
                            t.onclick = function c() {
                                if (nFocus != i) {
                                    aLiTab[nFocus].className = "";
                                    aDivTab[nFocus].style.display = "none";
                                    nFocus = i;
                                    aLiTab[nFocus].className = "on";
                                    aDivTab[nFocus].style.display = "";
                                }
                                bFlag = true;
                            };
                            t.onmouseout = function c() {
                                bFlag = false;
                            };
                 }
           
           
            ) (i);
        }
    };
 
 //-->
</SCRIPT>


<script type="text/javascript">

    window.onload = function() {
       c1();
}

</script>
   
  
 

posted @ 2011-02-14 11:05  启明星工作室  阅读(3281)  评论(0)    收藏  举报