javascript模仿新浪左侧的选项卡效果

【 tulaoshi.com - Web开发 】

head
  meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
  titlejavascript模仿新浪的黄色选项卡效果/title
  style type=”text/css”
   *{font-size:12px;margin:0;padding:0;}
   #dreamdujsexe{width:748px; height:250px; overflow:hidden; border:1px #cccbc9 solid; line-height:20px;margin:2em;padding:2em;}
   ul{list-style: none;}
   a{text-decoration: none;}
   a:hover{text-decoration: underline;}
   .TabADS{width:160px;}
   .TabADS ul{width:160px; height:24px;background:#fff;}
   .TabADS li{width:40px; float:left; height:18px; padding:6px 0 0 0; background:url(’http://image2.sina.com.cn/home/07index/sinahome_ws_013.gif’) no-repeat right #e4e4e4; text-align:center; color:#333; cursor:pointer;}
   .TabADS .TasADSOn{background:url(’http://image2.sina.com.cn/home/07index/sinahome_ws_012.gif’) no-repeat right #ffe4a6; text-align:center; color:#333; font-weight:bold; cursor:pointer;}
   .TabADSCon{background:#FFD77B;padding:5px;width:160px;}
   .TabADSCon li{text-align:left; line-height:20px;}
   .dreamdu{margin-bottom:2em;}
  /style
  script language=”javascript” type=”text/javascript”
   function Show_TabADSMenu(tabadid_num,tabadnum)
   {
    for(var i=0;i4;i++){document.getElementById(”tabadcontent_”+tabadid_num+i).style.display=”none”;}
    for(var i=0;i4;i++){document.getElementById(”tabadmenu_”+tabadid_num+i).className=”";}
    document.getElementById(”tabadmenu_”+tabadid_num+tabadnum).className=”TasADSOn”;
    document.getElementById(”tabadcontent_”+tabadid_num+tabadnum).style.display=”block”;
   }
  /script
 /head

  div class=”dreamdu”模仿新浪左侧的strong黄色选项卡/strong效果/div
  div id=”dreamdujsexe”
   div class=”TabADS”
    ul
     li id=”tabadmenu_10″ onmouseover=”setTimeout(’Show_TabADSMenu(1,0)’,200);” class=”TasADSOn”HTML/li
     li id=”tabadmenu_11″ onmouseover=”setTimeout(’Show_TabADSMenu(1,1)’,200);”CSS/li
     li id=”tabadmenu_12″ onmouseover=”setTimeout(’Show_TabADSMenu(1,2)’,200);”JS/li
     li id=”tabadmenu_13″ onmouseover=”setTimeout(’Show_TabADSMenu(1,3)’,200);”PHP/li
    /ul
   /div
   div class=”TabADSCon”
    ul id=”tabadcontent_10″
     lia href=”"涉及到的HTML知识点/a/li
     lia href=”"div标签/a/li
     lia href=”"ul标签/a/li
     lia href=”"li标签/a/li
     lia href=”"style标签/a/li
     lia href=”"script标签/a/li
     lia href=”"meta标签/a/li
     lia href=”"body标签/a/li
     lia href=”"DOCTYPE标签/a/li
    /ul
    ul id=”tabadcontent_11″ style=”display:none;”
     lia href=”"涉及到的CSS知识点/a/li
     lia href=”"font-size属性/a/li
     lia href=”"text-align属性/a/li
     lia href=”"cursor属性/a/li
     lia href=”"background属性/a/li
     lia href=”"border属性/a/li
     lia href=”"margin属性/a/li
     lia href=”"padding属性/a/li
    /ul
    ul id=”tabadcontent_12″ style=”display:none;”
     li涉及到的a href=”"javascript知识点/a:/li
     lionmouseover函数/li
    /ul
    ul id=”tabadcontent_13″ style=”display:none;”
     lia href=”"html代码示例/a/li
     lia href=”"css代码示例/a/li
     lia href=”"javascript代码示例/a/li
    /ul
   /div
  /div