常见的几个选项卡,导航。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>tab选项</title> <mce:style type="text/css"><!-- ul,li,p,dl,dt,dd{ margin:0; padding:0;} ul li{ list-style:none;} .m_t8{ margin-top:12px;} .c{zoom:1;} .c:after{ clear:both; height:0; display:block; visibility:hidden; content:".";} body{ font-size:12px; color:#666; font-family:"宋体";} #wrapper{ width:800px; margin:0 auto;} #tab1,#tab2{ border:1px solid #99CC99; padding:5px;} #tab1 ul li,#tab2 ul li{ float:left; cursor:pointer; padding:3px; color:#99CC00; border-right:1px solid #99CC66;} #tab1 ul li.now,#tab2 ul li.now{ color:#993300;} .tablist{ display:none;} .block{ display:block;} #nav1{ position:relative;} #nav1 ul{ position:absolute; z-index:1000;} #nav1 ul li{ float:left; width:120px; background:#CCCCCC; line-height:25px; text-align:center;} #nav1 ul li dl{ width:100%;} #nav1 ul li dt,#nav1 ul li dd{ padding:1px; margin-top:-1px;} #nav1 ul li dt{ padding-right:0;} #nav1 ul li dt a{ background:#999999; display:block;color:#99CC00;text-decoration:none; width:100%;} #nav1 ul li dt a:hover{ background:#666666;} #nav1 ul li dd { display:none;} #nav1 ul li dd a{ background:#FFFFFF; display:block; color:#999999; text-decoration:none; width:100%;} #nav1 ul li dd a:hover{ background:#666666;} --></mce:style><style type="text/css" mce_bogus="1">ul,li,p,dl,dt,dd{ margin:0; padding:0;} ul li{ list-style:none;} .m_t8{ margin-top:12px;} .c{zoom:1;} .c:after{ clear:both; height:0; display:block; visibility:hidden; content:".";} body{ font-size:12px; color:#666; font-family:"宋体";} #wrapper{ width:800px; margin:0 auto;} #tab1,#tab2{ border:1px solid #99CC99; padding:5px;} #tab1 ul li,#tab2 ul li{ float:left; cursor:pointer; padding:3px; color:#99CC00; border-right:1px solid #99CC66;} #tab1 ul li.now,#tab2 ul li.now{ color:#993300;} .tablist{ display:none;} .block{ display:block;} #nav1{ position:relative;} #nav1 ul{ position:absolute; z-index:1000;} #nav1 ul li{ float:left; width:120px; background:#CCCCCC; line-height:25px; text-align:center;} #nav1 ul li dl{ width:100%;} #nav1 ul li dt,#nav1 ul li dd{ padding:1px; margin-top:-1px;} #nav1 ul li dt{ padding-right:0;} #nav1 ul li dt a{ background:#999999; display:block;color:#99CC00;text-decoration:none; width:100%;} #nav1 ul li dt a:hover{ background:#666666;} #nav1 ul li dd { display:none;} #nav1 ul li dd a{ background:#FFFFFF; display:block; color:#999999; text-decoration:none; width:100%;} #nav1 ul li dd a:hover{ background:#666666;}</style> <mce:script type="text/javascript" language="javascript"><!-- function changeTab1(num,m){ var tabli=document.getElementById("tab"+m).getElementsByTagName("li"); var tablist=[]; var tabdiv=document.getElementById("tablist"+m).getElementsByTagName("div"); for(var i=0;i<tabdiv.length;i++){ if(tabdiv[i].className.indexOf("tablist")!=-1){ tablist.push(tabdiv[i]); } } for(var j=0;j<tabli.length;j++){ tabli[j].className=(num==j)?"now":""; tablist[j].style.display=num==j?"block":"none"; } } function changeNav(num){ var nav_dl=document.getElementById("nav1").getElementsByTagName("dl"); var nav_dd=document.getElementById("nav1").getElementsByTagName("dl")[num].getElementsByTagName("dd"); for(var j=0;j<nav_dd.length;j++){ nav_dd[j].style.display="block"; } } function changeNav2(num){ var nav_dd=document.getElementById("nav1").getElementsByTagName("dl")[num].getElementsByTagName("dd"); for(var i=0;i<nav_dd.length;i++){ nav_dd[i].style.display="none"; } } // --></mce:script> </head> <body> <div id="wrapper"> <p class="m_t8">鼠标点击选项</p> <div id="tab1"> <ul class="c"> <li class="now" οnclick="changeTab1(0,1)">选项1</li> <li οnclick="changeTab1(1,1)">选项2</li> <li οnclick="changeTab1(2,1)">选项3</li> <li οnclick="changeTab1(3,1)">选项4</li> <li οnclick="changeTab1(4,1)">选项5</li> </ul> <div id="tablist1"> <div class="tablist block">内容1(点击事件)</div> <div class="tablist">内容2</div> <div class="tablist">内容3</div> <div class="tablist">内容4</div> <div class="tablist">内容5</div> </div> </div> <p class="m_t8">鼠标over选项</p> <div id="tab2" > <ul class="c"> <li class="now" οnmοuseοver="changeTab1(0,2)">选项1</li> <li οnmοuseοver="changeTab1(1,2)">选项2</li> <li οnmοuseοver="changeTab1(2,2)">选项3</li> <li οnmοuseοver="changeTab1(3,2)">选项4</li> <li οnmοuseοver="changeTab1(4,2)">选项5</li> </ul> <div id="tablist2"> <div class="tablist block">内容1(mouseOver)</div> <div class="tablist">内容2</div> <div class="tablist">内容3</div> <div class="tablist">内容4</div> <div class="tablist">内容5</div> </div> </div> <p class="m_t8">鼠标over导航</p> <div id="nav1"> <ul class="c"> <li> <dl οnmοuseοver="changeNav(0)" οnmοuseοut="changeNav2(0)"> <dt><a href="#" mce_href="#">导航</a></dt> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> </dl> </li> <li> <dl οnmοuseοver="changeNav(1)" οnmοuseοut="changeNav2(1)"> <dt><a href="#" mce_href="#">导航</a></dt> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> </dl> </li> <li> <dl οnmοuseοver="changeNav(2)" οnmοuseοut="changeNav2(2)"> <dt><a href="#" mce_href="#">导航</a></dt> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> </dl> </li> <li> <dl οnmοuseοver="changeNav(3)" οnmοuseοut="changeNav2(3)"> <dt><a href="#" mce_href="#">导航</a></dt> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> </dl> </li> <li> <dl οnmοuseοver="changeNav(4)" οnmοuseοut="changeNav2(4)"> <dt><a href="#" mce_href="#">导航</a></dt> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> <dd><a href="#" mce_href="#">导航0</a></dd> </dl> </li> </ul> </div> <p style="margin-top:30px;" mce_style="margin-top:30px;">ddd</p> </div> </body> </html>