首页 »Javascript教程 » javascript选项卡:javascript模仿新浪左侧的选项卡效果 »正文javascript选项卡:javascript模仿新浪左侧的选项卡效果来源: 发布时间:星期一, 2009年3月2日 浏览:0次 评论:0
="t18"><head>
<meta http-equiv=”Content-Type” content=”text/html; char  =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.g  ’) no-repeat right #e4e4e4; text-align:center; color:#333; cursor:po er;}.TabADS .TasADSOn{background:url(’http://image2.sina.com.cn/home/07index/sinahome_ws_012.g ’) no-repeat right #ffe4a6; text-align:center; color:#333; font-weight:bold; cursor:poer;}.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). Name=”";}document.getElementById(”tabadmenu_”+tabadid_num+tabadnum). Name=”TasADSOn”;document.getElementById(”tabadcontent_”+tabadid_num+tabadnum).style.display=”block”; } </script> </head> <div =”dreamdu”>模仿新浪左侧<strong>黄色选项卡</strong>效果</div><div id=”dreamdujsexe”> <div =”TabADS”><ul> <li id=”tabadmenu_10″ _disibledevent=> <li id=”tabadmenu_11″ _disibledevent=> <li id=”tabadmenu_12″ _disibledevent=> <li id=”tabadmenu_13″ _disibledevent=> </ul> </div> <div =”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> 0
相关文章读者评论发表评论 |
|
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
