开发学院网页设计 JavaScript javascript模仿新浪左侧的选项卡效果阅读

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

　2009-03-02 20:05:39　来源：WEB开发网　　　

核心提示：<head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>javascript模仿新浪的黄色选项卡效果</title> <style type=”t

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>javascript模仿新浪的黄色选项卡效果</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;i<4;i++){document.getElementById(”tabadcontent_”+tabadid_num+i).style.display=”none”;}
　 for(var i=0;i<4;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″>
　　 <li><a href=”">涉及到的HTML知识点</a></li>
　　 <li><a href=”">div标签</a></li>
　　 <li><a href=”">ul标签</a></li>
　　 <li><a href=”">li标签</a></li>
　　 <li><a href=”">style标签</a></li>
　　 <li><a href=”">script标签</a></li>
　　 <li><a href=”">meta标签</a></li>
　　 <li><a href=”">body标签</a></li>
　　 <li><a href=”">DOCTYPE标签</a></li>
　 </ul>
　 <ul id=”tabadcontent_11″ style=”display:none;”>
　　 <li><a href=”">涉及到的CSS知识点</a></li>
　　 <li><a href=”">font-size属性</a></li>
　　 <li><a href=”">text-align属性</a></li>
　　 <li><a href=”">cursor属性</a></li>
　　 <li><a href=”">background属性</a></li>
　　 <li><a href=”">border属性</a></li>
　　 <li><a href=”">margin属性</a></li>
　　 <li><a href=”">padding属性</a></li>
　 </ul>
　 <ul id=”tabadcontent_12″ style=”display:none;”>
　　 <li>涉及到的<a href=”">javascript知识点</a>:</li>
　　 <li>onmouseover函数</li>
　 </ul>
　 <ul id=”tabadcontent_13″ style=”display:none;”>
　　 <li><a href=”">html代码示例</a></li>
　　 <li><a href=”">css代码示例</a></li>
　　 <li><a href=”">javascript代码示例</a></li>
　 </ul>
　 </div>
</div>