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

导读：
　　程序代码
　　
　　
　　
　　
　　
　　
　　
　　*{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(' http://www.sinaimg.cn/home/07index/sinahome_ws_010.gif') 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;}
　　
　　
　　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";
　　}
　　　　
　　
　　

JavaScript教程模仿新浪左侧的蓝色选项卡效果

　　

　　

　　

　　

　　
• 内容

　　
• 表现

　　
• 行为

　　
• 代码

　　

　　

　　

　　

　　

　　

　　
　　

　　

　　

　　

　　
　　
• line-height属性

　　

　　

　　

　　

　　
　　
• setTimeout函数

　　
• onmouseover函数

　　
• getElementById函数

　　
• className属性

　　
• display属性

　　
• for循环

　　
• js自定义函数

　　

　　

　　

　　

　　
• setTimeout函数

　　
• onmouseover函数

　　
• getElementById函数

　　
• className属性

　　

　　

　　

　　

　　

本文转自
http://news.lnwest.com/program/article.asp?id=634