<menu id="ocigx"><listing id="ocigx"><em id="ocigx"></em></listing></menu><em id="ocigx"><track id="ocigx"><strong id="ocigx"></strong></track></em>

<samp id="ocigx"></samp>

<mark id="ocigx"><ruby id="ocigx"><legend id="ocigx"></legend></ruby></mark><bdo id="ocigx"></bdo>

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

簡潔 Tab 選項卡，CSS代碼-滑動門選項卡

2018-10-16 20:52:58

字體：大中小

來源：轉載

供稿：網友

簡潔 Tab 選項卡，CSS代碼，一個頁面中如果使用多個TAB，就把上面的two復制,把two改成three,或任何一個不同名的id.

Source Code to Run [www.crfew.com 錯新網]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>簡潔Tab</title><style type="text/css"></style><script></script></head><body><div id="lib_Tab1"><div class="lib_Menubox lib_tabborder"><ul><li id="one1" onclick="setTab('one',1,4)" class="hover">新聞1</li><li id="one2" onclick="setTab('one',2,4)" >新聞2</li><li id="one3" onclick="setTab('one',3,4)">新聞3</li><li id="one4" onclick="setTab('one',4,4)">新聞4</li></ul></div><div class="lib_Contentbox lib_tabborder"><div id="con_one_1" >新聞列表1</div><div id="con_one_2" style="display:none">新聞列表2</div><div id="con_one_3" style="display:none">新聞列表3</div><div id="con_one_4" style="display:none">新聞列表4</div></div></div><div id="lib_Tab2"><div class="lib_Menubox lib_tabborder"><ul><li id="two1" onclick="setTab('two',1,4)" >新聞1</li><li id="two2" onclick="setTab('two',2,4)"class="hover" >新聞2</li><li id="two3" onclick="setTab('two',3,4)">新聞3</li><li id="two4" onclick="setTab('two',4,4)">新聞4</li></ul></div><div class="lib_Contentbox lib_tabborder"><div id="con_two_1" >新聞列表1</div><div id="con_two_2" style="display:none">新聞列表2</div><div id="con_two_3" style="display:none">新聞列表3</div><div id="con_two_4" style="display:none">新聞列表4</div></div></div></body></html>

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

上一篇：代碼經過精簡后的仿QQ折疊菜單-滑動門選項卡

下一篇：滑動TAB，滑動門，CSS+Js代碼-滑動門選項卡

學習交流

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

疑難解答

圖片精選

網友關注