CSS+JS簡潔實用的滑動導航欄

2024-09-05 12:20:24

字體：大中小

來源：轉載

供稿：網友

這個滑動門示例雖然簡潔，介理卻很實用，很多門戶都在用，不一定復雜的東西就是好，要根據自己的需要，用戶的需要適可而止，貴在使用，而不要炫技，您說呢？

<!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>滑動門導航</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="70qarhlowxag"   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="70qarhlowxag"   class="TabContent" id="tabContent1">ASP源代碼</div> <div   id="70qarhlowxag"   class="TabContent" id="tabContent2" >PHP精品源代碼</div> <div   id="70qarhlowxag"   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點擊收縮展開的豎直菜單

下一篇：Windows 風格選項卡標簽