模仿新浪的纵向蓝色选项卡效果

最新推荐文章于 2024-10-05 01:22:45 发布

zlchina1989

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量490

点赞数

文章标签： class javascript float border xhtml html

本文链接：https://blog.csdn.net/zlchina1989/article/details/5779401

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" target="_blank">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-CN" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <meta http-equiv="Content-Language" content="zh-CN" />
  <title>javascript模仿新浪的蓝色选项卡效果 -- JavaScript教程,JS教程</title>
  <style type="text/css">
   *{font-size:12px;margin:0;padding:0;}
   #dreamdujsexe{width:748px; height:185px; overflow:hidden; border:1px #cccbc9 solid; line-height:20px;margin:2em;}
   ul{list-style-type:none;}
   .topADL4{float:left; width:157px;}
   .topADTabs{width:22px; float:left; color:#494d50; padding-top:1px;}
   .topADTabs li{width:18px; height:36px; padding:9px 0 0 0; border:1px #fff solid; border-top:none; border-left:none; vertical-align:middle; line-height:15px; text-align:center; background:#e7edf9; cursor:pointer;}
   .topADTabs .topADTabsOn{width:19px; background:url(' <a href="http://www.sinaimg.cn/home/07index/sinahome_ws_010.gif" target="_blank">http://www.sinaimg.cn/home/07index/sinahome_ws_010.gif</a>') no-repeat; padding:9px 0 0 3px; border-left:1px #fff solid; text-align:left; cursor:pointer;}
   .topADTabsCon{width:115px; float:left; text-align:left; padding:4px 0 0 14px;}
   .topADTabsCon li{line-height:20px; height:20px; overflow:hidden;}
  </style>
  <script language="javascript" type="text/javascript">
   function Show_topADMenu(topadid_num,topadnum){
       for(var i=0;i<4;i++){ document.getElementById("topadcontent_"+topadid_num+i).style.display="none";}
       for(var i=0;i<4;i++){document.getElementById("topadmenu_"+topadid_num+i).className="";}
       document.getElementById("topadmenu_"+topadid_num+topadnum).className="topADTabsOn";
       document.getElementById("topadcontent_"+topadid_num+topadnum).style.display="block";
   }
  </script>
</head>
<body>
  <div class="dreamdu"><a href=" <a href="http://www.dreamdu.com/javascript/" target="_blank">http://www.dreamdu.com/javascript/</a>">JavaScript教程</a>模仿<a href="<a href="http://www.sina.com.cn/" target="_blank">http://www.sina.com.cn/</a>">新浪</a>左侧的蓝色<strong>选项卡</strong>效果</div>
  <div id="dreamdujsexe">
   <div class="topADL4">
    <div class="topADTabs">
     <ul>
      <li id="topadmenu_10" οnmοuseοver="setTimeout('Show_topADMenu(1,0)',200);" class="topADTabsOn">内容</li>
      <li id="topadmenu_11" οnmοuseοver="setTimeout('Show_topADMenu(1,1)',200);">表现</li>
      <li id="topadmenu_12" οnmοuseοver="setTimeout('Show_topADMenu(1,2)',200);">行为</li>
      <li id="topadmenu_13" οnmοuseοver="setTimeout('Show_topADMenu(1,3)',200);">代码</li>
     </ul>
    </div>
    <div class="topADTabsCon" id="topadcontent_10">
     <ul>
      <li></li>
      <li></li>

     </ul>
    </div>
    <div class="topADTabsCon" id="topadcontent_11" style="display:none;">
     <ul>

      <li>line-height属性</li>
     </ul>
    </div>
    <div class="topADTabsCon" id="topadcontent_12" style="display:none;">
     <ul>

      <li>setTimeout函数</li>
      <li>onmouseover函数</li>
      <li>getElementById函数</li>
      <li>className属性</li>
      <li>display属性</li>
      <li>for循环</li>
      <li>js自定义函数</li>
     </ul>
    </div>
    <div class="topADTabsCon" id="topadcontent_13" style="display:none;">
     <ul>
<li>setTimeout函数</li>
      <li>onmouseover函数</li>
      <li>getElementById函数</li>
      <li>className属性</li>
     </ul>
    </div>
   </div>
  </div>
</body>
</html>