船长 发表于 2009-03-05 10:26 | 分类：javascript | 阅读数：894 次
网易的选项卡风格，很简单，就是控制样式和显示罢了，运行查看效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网易的选项卡风格-JS特效学院-jsweb8.cn</title> <style type="text/css"> <!-- /* 全局CSS定义 */ body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;} /* 2列 */ .divArea{margin:0 auto; width:750px;background:url("http://www.songlecn.com/wp-content/supload/2009/03/05/bg561.gif");} .divArea .Col1{float:left; width:436px;} .divArea .Col2{float:right; width:300px;} /* 左边选项卡 */ .naTab{clear:both;border-bottom:1px #CCCCCC solid;} .naTab .TabTitle{ height:22px; clear:both;overflow:hidden;} .naTab .TabTitle ul{margin:0; padding:0;} .naTab .TabTitle li{ list-style-type:none; padding:6px 0 2px;cursor:pointer;} .naTab .TabTitle .active{ float:left;width:146px;background:url("http://www.songlecn.com/wp-content/supload/2009/03/05/bg5_6_1.gif");} .naTab .TabTitle .normal{ float:left;width:145px;background:url("http://www.songlecn.com/wp-content/supload/2009/03/05/bg5_6_2.gif");} .naTab .TabContent {padding:10px;} /* 右边选项卡 */ .n4Tab{clear:both;border-bottom:1px #CCCCCC solid;} .n4Tab .TabTitle{} .n4Tab .TabTitle ul{margin:0; padding:0;} .n4Tab .TabTitle li{float:left; width:60px; height:26px; list-style-type:none;cursor:pointer;} .n4Tab .TabTitle li h6{font-size:12px; font-weight:normal; padding:8px 0 0;margin:0;} .n4Tab .TabTitle .normal{background:url("http://www.songlecn.com/wp-content/supload/2009/03/05/admenu_bg2.gif");} .n4Tab .TabTitle .active{background:url("http://www.songlecn.com/wp-content/supload/2009/03/05/admenu_bg1.gif");} .n4Tab .TabContent {padding:10px;} .none {display:none;} --> </style> <script type="text/javascript"> function nTabs(tabObj,obj){ var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++) { if (tabList[i].id == obj.id) { document.getElementById(tabObj+"_Title"+i).className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ document.getElementById(tabObj+"_Title"+i).className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script> </head> <body> <br /> <!-- 内容开始 --> <div class="divArea"> <!-- left --> <div class="Col1"> <!-- 娱乐开始 --> <div class="naTab" id="naTab" style="height:177px;"> <div class="TabTitle"> <ul> <li id="naTab_Title0" onclick="nTabs('naTab',this);" class="active"><a href="javascript:void(0);">娱乐</a></li> <li id="naTab_Title1" onclick="nTabs('naTab',this);" class="normal"><a href="javascript:void(0);">女人</a></li> <li id="naTab_Title2" onclick="nTabs('naTab',this);" class="normal"><a href="javascript:void(0);">汽车</a></li> </ul> </div> <div class="TabContent"> <div id="naTab_Content0"> gg </div> <div id="naTab_Content1" class="none">ddddddd gg </div> <div id="naTab_Content2" class="none">rfffffffff</div> </div> <!-- 娱乐结束 --> </div> </div> <!-- right --> <div class="Col2"> <!-- 分类信息开始 --> <div class="n4Tab" id="n4Tab" style="height:177px;"> <div class="TabTitle"> <ul> <li id="n4Tab_Title0" onmouseover="nTabs('n4Tab',this);" class="active"><h6><a href="javascript:void(0);">资讯</a></h6></li> <li id="n4Tab_Title1" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">教育</a></h6></li> <li id="n4Tab_Title2" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">房产</a></h6></li> <li id="n4Tab_Title3" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">招商</a></h6></li> <li id="n4Tab_Title4" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">拍卖</a></h6></li> </ul> </div> <div class="TabContent"> <div id="n4Tab_Content0"> ah </div> <div id="n4Tab_Content1" class="none"> sh </div> <div id="n4Tab_Content2" class="none"> dh </div> <div id="n4Tab_Content3" class="none"> vh </div> <div id="n4Tab_Content4" class="none"> nh </div> </div> </div> <!-- 分类信息结束 --> </div> </div> <!-- 内容结束 --> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
