简洁 Tab 选项卡，CSS代码-滑动门选项卡

2018-10-16 20:52:58

字体：大中小

来源：转载

供稿：网友

简洁 Tab 选项卡，CSS代码，一个页面中如果使用多个TAB，就把上面的two复制,把two改成three,或任何一个不同名的id.

Source Code to Run [www.cuoxin.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代码-滑动门选项卡