常见的选项卡导航

来源：互联网发布：telnet端口怎么打开编辑：程序博客网时间：2024/05/21 13:55

常见的几个选项卡，导航。

<!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"></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"></mce:script></head><body><div id="wrapper"><p class="m_t8">鼠标点击选项</p><div id="tab1"><ul class="c"><li class="now" onclick="changeTab1(0,1)">选项1</li><li onclick="changeTab1(1,1)">选项2</li><li onclick="changeTab1(2,1)">选项3</li><li onclick="changeTab1(3,1)">选项4</li><li onclick="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" onmouseover="changeTab1(0,2)">选项1</li><li onmouseover="changeTab1(1,2)">选项2</li><li onmouseover="changeTab1(2,2)">选项3</li><li onmouseover="changeTab1(3,2)">选项4</li><li onmouseover="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 onmouseover="changeNav(0)" onmouseout="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 onmouseover="changeNav(1)" onmouseout="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 onmouseover="changeNav(2)" onmouseout="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 onmouseover="changeNav(3)" onmouseout="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 onmouseover="changeNav(4)" onmouseout="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>