JS菜鸟的问题！拜求指教！关于选项卡...需要您略懂CSS，希望前辈指教！

<div id="666"> 
    <div class="bq"> 
      <ul id="oUlTab"> 
      <li > <a href="#">AAA </a> </li> 
      <li  class="on"> <a href="#">BBB </a> </li> 
      </ul> 
    </div>   <!---多窗口操作---> 
  <div class="bq_d" id="oDivTab1" style="display:none"> 
      <div class="bq_n"> 
 <img src="1gif" /> <br /> 
    　　 <div>111111111 </div> 
      </div> 
  </div>   <div class="bq_d" id="oDivTab2"> 
      <div class="bq_n"> 
  <img src="2.if" /> <br />
  <div>222222222</div> 
      </div> 
  </div> 
</div> 

解决方案 »

  1.   

    LZ ，你写的那个太复杂了，你看看我写的这个怎么样，只用两个循环就解决的问题。<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta content="一种选项卡样式广告代码" name="keywords" />
    <title>一种选项卡样式代码</title>
    <link href="css/css.css" rel="stylesheet" type="text/css">
    </head><body>
    <table width="400" border="0" cellpadding="0" cellspacing="0" class="solid-bottom">
      <tr>
        <td width="383" height="19"><table  border="0"  cellpadding="0"  cellspacing="0"  id="secTable">
          <tr>
            <td  width="70" align="center"  class="sec2"  onmouseover="secBoard(0)">AveIcon</td>
            <td  width="120" align="center"  class="sec1"  onmouseover="secBoard(1)">SWF_Decompiler</td>
            <td  width="110" align="center"  class="sec1"  onmouseover="secBoard(2)">FlashCatcher</td>
          </tr>
        </table></td>
        <td width="17">
    <script  language="JavaScript" type="text/javascript">
    function  secBoard(n)
    {
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
      secTable.cells[n].className="sec2";
    for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies[i].style.display="none";
      mainTable.tBodies[n].style.display="block";
    }
    </script></td>
      </tr>
    </table>
    <table  border="0"  cellspacing="5"  cellpadding="0"  width="400"  height="120"  id="mainTable">
      <tbody  style="display:block;">
        <tr>
          <td height="120"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="72"><img src="images/AveIcon.jpg" width="180" height="41" align="left" />AveIcon 是一个小巧的 ICO/PNG 互转小工具，有了它你就不用再打开庞大的 Axialis IconWorkshop   了，而且它界面超简洁，只需拖动图片到窗口中再拖动回来，整个转换过程就算完成了。 </td>
            </tr>
            <tr>
              <td height="22" align="right"><a href="http://www.jz123.cn/soft/">立刻下载 AveIcon</a></td>
            </tr>
          </table></td>
        </tr>
      </tbody>
      <tbody  style="display:none;">
        <tr>
          <td height="120"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="72"><img src="images/SWFDecompiler_icon.jpg" width="51" height="53" align="right" />用于浏览和解析Flash动画.swf文件的工具。它能够将flash动画中的图片、矢量图、字体、文字、按钮、影片片段、帧等基本元素完全分解，还可以对flash影片动作Action进行解析，清楚的显示其动作的代码，让您对Flash动画的构造一目了然。</td>
            </tr>
            <tr>
              <td height="22" align="right"><a href="http://www.jz123.cn/soft/">下载 SWF_Decompiler</a></td>
            </tr>
          </table></td>
        </tr>
      </tbody>
      <tbody  style="display:none;">
        <tr>
          <td height="120"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="72"><img src="images/FlashCatcher.jpg" width="180" height="40" align="left" />您在浏览网页的时候，有没有为了保存一个喜欢的Flash而不知所措呢？别急，这个小软件可以让您轻而易举地将页面中的Flash给抓出来，保存Flash就这么简单。</td>
            </tr>
            <tr>
              <td height="22" align="right"><a href="http://www.jz123.cn/soft/">下载 FlashCatcher</a></td>
            </tr>
          </table></td>
        </tr>
      </tbody>
      <tbody  style="display:none;">
      </tbody>
    </table>
    </body>
    </html>
    CSS.body { 
    FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
    text-align: center;
    } TD {FONT-SIZE: 12px; COLOR: #333;}
    .solid-bottom {BORDER-BOTTOM: #dddddd 1px solid}.sec1  {
    background-color:  #F4F4F4;
    cursor:  hand;
    color:  #000000;
    border-left:  1px  solid  #FFFFFF;
    border-top:  1px  solid  #FFFFFF;
    border-right:  1px  solid  gray;
    border-bottom:  1px  solid  #FFFFFF
    }
    .sec2  {
    background-color:  #EAEAEA;
    cursor:  hand;
    color:  #58A200;
    border-left:  1px  solid  #FFFFFF;
    border-top:  1px  solid  #FFFFFF;
    border-right:  1px  solid  gray;
    font-weight:  bold;
    }
      

  2.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title><style>
    .666{width:420px; height:280px;  float:left; overflow:hidden; margin:4px 0px 0px 4px;} 
    .bq{width:420px; height:27px;margin:0px;} 
    .bq ul{padding:0px; margin:0px; list-style-type:none;} 
    .bq li{width:109px; height:27px;padding-top:0px;margin-right:4px; text-align:center; float:left; cursor:pointer; }
    .bq li a{font-size:14px; font-weight:bold; color:#FFFFFF;} 
    .bq li a:hover{text-decoration:none;} 
    .bq li.on{ border:solid 1px #4096EE; BACKGROUND: url(images/sousuo.gif) 0px -0px; border-bottom-style:none;} 
    .bq li.on2{ border:solid 1px #4096EE; BACKGROUND: url(images/sousuo.gif) 0px -60px; border-bottom-style:none;} 
    .bq li.on a{font-size:14px;color:#4096EE;} .bq_d{width:418px; height:250px; BORDER-RIGHT: #deeaf8 1px solid; BORDER-TOP: #deeaf8 1px solid; BORDER-LEFT: #deeaf8 1px solid; BORDER-BOTTOM: #deeaf8 1px solid } 
    .bq_n{width:100%; padding-top:15px; text-align:center;} 
    .bq_d .c4{ text-align:left} 
    .clear{ clear:both; font-size:0; height:0}.bq li.B1{ border:solid 1px #4096EE; BACKGROUND: #4096EE url(images/sousuo.gif) 0px -0px; border-bottom-style:none;}
    .bq li.A1{ border:solid 1px #4096EE; BACKGROUND: #4096EE url(images/sousuo.gif) 0px -60px; border-bottom-style:none;}
    .bq li.A2{BACKGROUND: #000 url(images/sousuo.gif) 0px -30px; border-bottom-style:none;}
    .bq li.B2{BACKGROUND: #000 url(images/sousuo.gif) 0px -30px; border-bottom-style:none;}
    </style>
    </head><body>
    <script language="JavaScript"> 
    <!-- 
    var nTime = 3; 
    var nFocus= 0; 
    var bFlag = false; 
    var aLiTab , aDivTab; /*自动跳转 
    function fAutoSwitch(){ 
    var n = nFocus + 1; 
    if(n >=2){ 
    n = 0; 
    } 
    if(!bFlag){ 
    aLiTab[n].onmouseover(); 
    bFlag = false; 
    } 
    } 
    */window.onload = function(){ 
    var $ = function($){ return document.getElementById($); }; 
    aLiTab = $("oUlTab").getElementsByTagName("li"); 
    aDivTab = [$("oDivTab1") , $("oDivTab2")]; 
    for(var i=0;i <aLiTab.length;i++){
    (function(i){ 
    var t = aLiTab[i]; 
    t.onmouseover = function(){ 
    for(var j=0;j <aLiTab.length;j++){
    if (aLiTab[j]==this){
    aLiTab[j].className = aLiTab[j].id+"1";
    aDivTab[j].style.display = "";
    }
    else{
    aLiTab[j].className = aLiTab[j].id+"2";
    aDivTab[j].style.display = "none";
    }
    }
    bFlag = true; 
    }; 
    t.onmouseout = function(){ 
    bFlag = false; 
    }; 
    })(i); 
    } 
    }; //--> 
    </script> 
    <div id="666"> 
        <div class="bq"> 
          <ul id="oUlTab"> 
              <li id=A  class="A2" > <a href="#">AAA </a> </li> 
              <li id=B  class="B1"> <a href="#">BBB </a> </li> 
          </ul> 
        </div>   <!---多窗口操作---> 
      <div class="bq_d" id="oDivTab1" style="display:none"> 
          <div class="bq_n"> 
             <img src="1gif" /> <br /> 
        　　 <div>111111111 </div> 
          </div> 
      </div>   <div class="bq_d" id="oDivTab2"> 
          <div class="bq_n"> 
              <img src="2.if" /> <br />
              <div>222222222</div> 
          </div> 
      </div> 
    </div> </body></html>
      

  3.   

    谢谢前辈的回答！我的问题解决了！
    能否多问您一下
    选项卡这么写的情况下，如果把这个选项卡看做一个DIV，请问怎么再这个选项卡右边再放置一个DIV呢？需要在哪加 float:left;？
      

  4.   

    请问怎么再这个选项卡右边再放置一个DIV呢？需要在哪加 float:left;？
    re:
    <div id="parentdiv">
    <div id="item_0"></div>
    <div id="item_1"></div>
    <div id="item_2"></div>
    <div id="item_3"></div>
    ...
    <div id="item_n"></div>
    </div>
    #item_n{float:left;}
    或
    #parentdiv{display:inline;}
    都可以！多选项步用数组是最简单的！也是最理想的！但要在id的命名上用点小技巧！不然JS代码量也会很大
      

  5.   

    <div style="margin:0px;padding:0px;">
    <div style="float:left;">
    层1
    </div>
    <div style="float:left;">
    层2
    </div>
    </div
      

  6.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title><style>
    .666{width:420px; height:280px;  float:left; overflow:hidden; margin:4px 0px 0px 4px;border:1px #efefef solid} 
    .bq{width:420px; height:27px;margin:0px;} 
    .bq ul{padding:0px; margin:0px; list-style-type:none;} 
    .bq li{width:109px; height:27px;padding-top:0px;margin-right:4px; text-align:center; float:left; cursor:pointer; }
    .bq li a{font-size:14px; font-weight:bold; color:#FFFFFF;} 
    .bq li a:hover{text-decoration:none;} 
    .bq li.on{ border:solid 1px #4096EE; BACKGROUND: url(images/sousuo.gif) 0px -0px; border-bottom-style:none;} 
    .bq li.on2{ border:solid 1px #4096EE; BACKGROUND: url(images/sousuo.gif) 0px -60px; border-bottom-style:none;} 
    .bq li.on a{font-size:14px;color:#4096EE;} .bq_d{width:418px; height:250px; BORDER-RIGHT: #deeaf8 1px solid; BORDER-TOP: #deeaf8 1px solid; BORDER-LEFT: #deeaf8 1px solid; BORDER-BOTTOM: #deeaf8 1px solid } 
    .bq_n{width:100%; padding-top:15px; text-align:center;} 
    .bq_d .c4{ text-align:left} 
    .clear{ clear:both; font-size:0; height:0}.bq li.B1{ border:solid 1px #4096EE; BACKGROUND: #4096EE url(images/sousuo.gif) 0px -0px; border-bottom-style:none;}
    .bq li.A1{ border:solid 1px #4096EE; BACKGROUND: #4096EE url(images/sousuo.gif) 0px -60px; border-bottom-style:none;}
    .bq li.A2{BACKGROUND: #000 url(images/sousuo.gif) 0px -30px; border-bottom-style:none;}
    .bq li.B2{BACKGROUND: #000 url(images/sousuo.gif) 0px -30px; border-bottom-style:none;}
    .999{width:420px; height:280px;  float:left; overflow:hidden; margin: 4px 8px 0px 10px;border:1px red solid;} 
    </style>
    </head><body>
    <script language="JavaScript"> 
    <!-- 
    var nTime = 3; 
    var nFocus= 0; 
    var bFlag = false; 
    var aLiTab , aDivTab; /*自动跳转 
    function fAutoSwitch(){ 
    var n = nFocus + 1; 
    if(n >=2){ 
    n = 0; 
    } 
    if(!bFlag){ 
    aLiTab[n].onmouseover(); 
    bFlag = false; 
    } 
    } 
    */window.onload = function(){ 
        var $ = function($){ return document.getElementById($); }; 
        aLiTab = $("oUlTab").getElementsByTagName("li"); 
        aDivTab = [$("oDivTab1") , $("oDivTab2")]; 
        for(var i=0;i <aLiTab.length;i++){
            (function(i){ 
                var t = aLiTab[i]; 
                t.onmouseover = function(){ 
                    for(var j=0;j <aLiTab.length;j++){
                        if (aLiTab[j]==this){
                            aLiTab[j].className = aLiTab[j].id+"1";
                            aDivTab[j].style.display = "";
                        }
                        else{
                            aLiTab[j].className = aLiTab[j].id+"2";
                            aDivTab[j].style.display = "none";
                        }
                    }
                    bFlag = true; 
                }; 
                t.onmouseout = function(){ 
                    bFlag = false; 
                }; 
            })(i); 
        } 
    }; //--> 
    </script> 
    <div id="666" class=666> 
        <div class="bq"> 
          <ul id="oUlTab"> 
              <li id=A  class="A2" > <a href="#">AAA </a> </li> 
              <li id=B  class="B1"> <a href="#">BBB </a> </li> 
          </ul> 
        </div>   <!---多窗口操作---> 
      <div class="bq_d" id="oDivTab1" style="display:none"> 
          <div class="bq_n"> 
             <img src="1gif" /> <br /> 
        　　 <div>111111111 </div> 
          </div> 
      </div>   <div class="bq_d" id="oDivTab2"> 
          <div class="bq_n"> 
              <img src="2.if" /> <br />
              <div>222222222</div> 
          </div> 
      </div> 
    </div> 
    <div id="999" class=999>right div
    </div> </body></html>