自己写的CSS滑动门，蓝色经典风格-滑动门选项卡

2018-10-16 20:53:05

字体：大中小

来源：转载

供稿：网友

自己写的CSS滑动门，蓝色经典风格，没有使用任何的修饰图片，清新自然，网户网站都在用，个人感觉还行吧。

Source Code to Run [www.cuoxin.com 错新网]

<!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>CSS滑动门</title><style type="text/css">.tabber{border:1px solid #AACCEE;clear:both;}.tabber .tmenu ul{margin:0;padding:0; display:block;}.tabber .tmenu li{float:left;height:25px;line-height:25px;border-bottom:1px solid #AACCEE;border-right:1px solid #AACCEE;border-color:#AACCEE;border-width:1px;color:#004499;cursor:pointer;display:block;text-align:center;}.tabber .tmenu li.on{background:#FFF;border-bottom-color:#FFFFFF;cursor:default;font-weight:bold;}.tabber .tbox{height:267px;clear:both;}.tabber .tbox div p{padding:15px;}.block{display:block;}.none{display:none;}</style><script type="text/javascript">function SetTab(tab,id,cnt){var menus=document.getElementById(tab).getElementsByTagName("li");for(i=0;i<cnt;i++){i==id?menus[i].className="on":menus[i].className="";i==id?document.getElementById(tab+"-content"+i).className="block":document.getElementById(tab+"-content"+i).className="none";}}</script></head><body><div class="tabber" style="width: 529px;"><div class="tmenu"><ul id="tab1"><li style="width: 85px;" class="on" onmouseover="SetTab('tab1',0,4);">新闻</li><li style="width: 85px;" onmouseover="SetTab('tab1',1,4);">娱乐</li><li style="width: 85px;" onmouseover="SetTab('tab1',2,4);">财经</li><li style="width: 85px;" onmouseover="SetTab('tab1',3,4);">读书</li><li style="width: 185px; border-bottom: solid 1px #AACCEE; border-right: none;"><ahref="#">关注更多？</a></li></ul></div><div class="tbox"><div id="tab1-content0" class="block"><p>看新闻，上网易</p></div><div id="tab1-content1" class="none"><p>娱乐七天乐</p></div><div id="tab1-content2" class="none"><p>今天股市暴跌</p></div><div id="tab1-content3" class="none"><p>读书使人进步……</p></div></div></div><br /><div class="tabber" style="width: 343px;"><div class="tmenu"><ul id="tab2"><li style="width: 85px;" class="on" onmouseover="SetTab('tab2',0,4);">新闻</li><li style="width: 85px;" onmouseover="SetTab('tab2',1,4);">娱乐</li><li style="width: 85px;" onmouseover="SetTab('tab2',2,4);">Ajax</li><li style="width: 85px; border-right: none;" onmouseover="SetTab('tab2',3,4);">编程</li></ul></div><div class="tbox"><div id="tab2-content0" class="block"><p>最新的新闻内容</p></div><div id="tab2-content1" class="none"><p>时尚娱乐资讯</p></div><div id="tab2-content2" class="none"><p>Ajax成就未来……</p></div><div id="tab2-content3" class="none"><p> ASP.NET...</p></div></div></div></body></html>

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

上一篇：仿Windows风格的选项卡-滑动门选项卡

下一篇：侧边栏导航菜单，溢出式导航-滑动门选项卡