CSS+JS簡(jiǎn)潔實(shí)用的滑動(dòng)導(dǎo)航欄

2024-09-05 12:20:24

字體：大中小

供稿：網(wǎng)友

這個(gè)滑動(dòng)門(mén)示例雖然簡(jiǎn)潔，介理卻很實(shí)用，很多門(mén)戶(hù)都在用，不一定復(fù)雜的東西就是好，要根據(jù)自己的需要，用戶(hù)的需要適可而止，貴在使用，而不要炫技，您說(shuō)呢？

<!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>滑動(dòng)門(mén)導(dǎo)航</title><style type="text/css">*{ margin:0; padding:0; font-size:12px;}body{ margin:5px;}.Tab{ width:300px;}.TabBar{ width:300px; list-style-type:none;}.TabBarNormal{ float:left; width:60px; border:1px solid #0066CC; border-bottom:0px solid #fff; line-height:24px; text-align:center; margin:0 3px;}.TabBarActive{ float:left; width:60px; border:1px solid #0066CC; border-bottom:0px solid #fff; background-color:#EEEEEE; line-height:25px; text-align:center; margin:0 3px; color:red}.TabContent{ width:100%; height:200px; border:1px solid #0066CC; padding:5px; position:absolute; margin-top:-1px;}</style></head><body><div   id="iwvjtn8m0"   class="Tab"> <ul class="TabBar">  <li id="tab1" class="TabBarActive" onmouseover="showTab(1);">ASP</li>  <li id="tab2" class="TabBarNormal" onmouseover="showTab(2);">PHP</li>  <li id="tab3" class="TabBarNormal" onmouseover="showTab(3);">AJAX</li> </ul> <div   id="iwvjtn8m0"   class="TabContent" id="tabContent1">ASP源代碼</div> <div   id="iwvjtn8m0"   class="TabContent" id="tabContent2" >PHP精品源代碼</div> <div   id="iwvjtn8m0"   class="TabContent" id="tabContent3" >Ajax資源腳本</div></div><script type="text/javascript">var activeTab =1;var activeTabContent = 1;var i;for (i=2;i<=3;i++) { document.getElementById("tabContent"+i).style.display="none";}function showTabContent(n) { document.getElementById("tabContent"+activeTabContent).style.display="none"; document.getElementById("tabContent"+n).style.display=""; activeTabContent=n;}function showTab(n) { document.getElementById("tab"+activeTab).className="TabBarNormal"; document.getElementById("tab"+n).className="TabBarActive"; activeTab=n; showTabContent(n);}</script></body></html>

上一篇：JS+CSS點(diǎn)擊收縮展開(kāi)的豎直菜單

下一篇：Windows 風(fēng)格選項(xiàng)卡標(biāo)簽