<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>

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

滑動TAB，滑動門，CSS+Js代碼-滑動門選項卡

2018-10-16 20:52:59

字體：大中小

來源：轉載

供稿：網友

滑動TAB，滑動門，CSS+Js代碼，貌似很不錯的樣子，風格經典，鼠標感應很不錯，代碼量少，用到網頁上挺不錯的。

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><title>滑動TAB</title><script language="javascript">function tabChange(obj,id){var arrayli = obj.parentNode.getElementsByTagName("li"); //獲取li數組var arrayul = document.getElementById(id).getElementsByTagName("ul"); //獲取ul數組for(i=0;i<arrayul.length;i++){if(obj==arrayli[i]){arrayli[i].className = "cli";arrayul[i].className = "";}else{arrayli[i].className = "";arrayul[i].className = "hidden";}}}</script><style type="text/css">.tabbox {width:300px;height:250px;}.tabmenu {width:295px;height:28px;border-left:1px solid  #CCC;border-top:1px solid #ccc;}.tabmenu ul {margin:0;padding:0;list-style-type: none;}.tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}.tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}#tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}#tabcontent ul {margin:0;padding:5px;list-style-type: none;}#tabcontent .hidden {display:none;}</style></head><body><div class="tabbox"><div class="tabmenu"><ul><li onmouseover="tabChange(this,'tabcontent')" class="cli">軍事</li><li onmouseover="tabChange(this,'tabcontent')">娛樂</li><li onmouseover="tabChange(this,'tabcontent')">國內</li><li onmouseover="tabChange(this,'tabcontent')">國外</li><li onmouseover="tabChange(this,'tabcontent')">游戲</li></ul></div><div id="tabcontent"><ul name="tabul"><li><a href="#">1111111111111111111111</a></li><li><a href="#">1111111111111111111111</a></li><li><a href="#">1111111111111111111111</a></li><li><a href="#">1111111111111111111111</a></li><li><a href="#">1111111111111111111111</a></li><li><a href="#">1111111111111111111111</a></li></ul><ul class="hidden"><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li></ul><ul class="hidden"><li><a href="#">3333333333333333333333</a></li><li><a href="#">3333333333333333333333</a></li><li><a href="#">3333333333333333333333</a></li><li><a href="#">3333333333333333333333</a></li><li><a href="#">3333333333333333333333</a></li><li><a href="#">3333333333333333333333</a></li></ul><ul class="hidden"><li><a href="#">4444444444444444444444</a></li><li><a href="#">4444444444444444444444</a></li><li><a href="#">4444444444444444444444</a></li><li><a href="#">4444444444444444444444</a></li><li><a href="#">4444444444444444444444</a></li><li><a href="#">4444444444444444444444</a></li></ul><ul class="hidden"><li><a href="#">5555555555555555555555</a></li><li><a href="#">5555555555555555555555</a></li><li><a href="#">5555555555555555555555</a></li><li><a href="#">5555555555555555555555</a></li><li><a href="#">5555555555555555555555</a></li><li><a href="#">5555555555555555555555</a></li></ul></div></div></body></html>

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

上一篇：簡潔 Tab 選項卡，CSS代碼-滑動門選項卡

下一篇：經典的Tab選項卡代碼,淡入淡出-滑動門選項卡

學習交流

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>