<li id="spc7x"><object id="spc7x"></object></li>

<rp id="spc7x"></rp>

<th id="spc7x"><pre id="spc7x"></pre></th>

<button id="spc7x"><acronym id="spc7x"></acronym></button>

首頁 > 設計 > 實用代碼 > 正文

CSS+JS簡潔實用的滑動導航欄-滑動門選項卡

2018-10-16 20:53:04

字體：大中小

來源：轉載

供稿：網友

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

Source Code to Run [www.liquidfrog.net 錯新網]

<!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 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 class="TabContent" id="tabContent1">ASP源<a target="_blank" href="http://www.liquidfrog.net" class="UBBWordLink">代碼</a></div><div class="TabContent" id="tabContent2" >PHP精品源<a target="_blank" href="http://www.liquidfrog.net" class="UBBWordLink">代碼</a></div><div 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>

提示:您可以修改后再運行

上一篇：Windows 風格選項卡標簽-滑動門選項卡

下一篇：仿Windows風格的選項卡-滑動門選項卡

學習交流

phpwind的rewrite重寫原理

phpwind的rewrite重寫原理...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

為什么家庭升級要選激光電視？

2019-10-14 09:23:13

OPPO推出搭載Snapdragon730G的超強功能的新款K5

2019-10-14 08:35:41

360隨身wifi2代怎么使用？好用嗎？

2019-10-11 08:59:55

360旗下魯大師掛牌上市系中國首個硬件評測供應商

2019-10-11 08:54:28

華為Mate30 Pro系統迎更新新增超高清夜攝功能

2019-10-11 08:49:58

華為P40Pro概念圖：麒麟990+鴻蒙系統前后配7顆鏡頭

2019-10-11 08:25:39

疑難解答

圖片精選

網友關注

精品国产青草久久久久福利

<li id="spc7x"><object id="spc7x"></object></li>

<rp id="spc7x"></rp>

<th id="spc7x"><pre id="spc7x"></pre></th>

<button id="spc7x"><acronym id="spc7x"></acronym></button>