滑动TAB，滑动门，CSS+Js代码，貌似很不错的样子，风格经典，鼠标感应很不错，代码量少，用到网页上挺不错的。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /><br /> <title>滑动TAB - Liehuo.Net</title><br /> <script language="javascript"><br /> function tabChange(obj,id)<br /> {<br /> var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组<br /> var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组<br /> for(i=0;i<arrayul.length;i++)<br /> {<br /> if(obj==arrayli[i])<br /> {<br /> arrayli[i].className = "cli";<br /> arrayul[i].className = "";<br /> }<br /> else<br /> {<br /> arrayli[i].className = "";<br /> arrayul[i].className = "hidden";<br /> }<br /> }<br /> }<br /> </script><br /> <style type="text/css"><br /> .tabbox {width:300px;height:250px;}<br /> .tabmenu {width:295px;height:28px;border-left:1px solid #CCC;border-top:1px solid #ccc;}<br /> .tabmenu ul {margin:0;padding:0;list-style-type: none;}<br /> .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;}<br /> .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;}<br /> #tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}<br /> #tabcontent ul {margin:0;padding:5px;list-style-type: none;}<br /> #tabcontent .hidden {display:none;}<br /> </style><br /> </head><br /> <body><br /> <div class="tabbox"><br /> <div class="tabmenu"><br /> <ul><br /> <li onmouseover="tabChange(this,'tabcontent')" class="cli">军事</li><br /> <li onmouseover="tabChange(this,'tabcontent')">娱乐</li><br /> <li onmouseover="tabChange(this,'tabcontent')">国内</li><br /> <li onmouseover="tabChange(this,'tabcontent')">国外</li><br /> <li onmouseover="tabChange(this,'tabcontent')">游戏</li><br /> </ul><br /> </div><br /> <div id="tabcontent"><br /> <ul name="tabul"><br /> <li><a href="#">烈火学院www.veryhuo.com</a></li><br /> <li><a href="#">烈火学院www.veryhuo.com</a></li><br /> <li><a href="#">烈火学院www.veryhuo.com</a></li><br /> <li><a href="#">烈火学院www.veryhuo.com</a></li><br /> <li><a href="#">烈火学院www.veryhuo.com</a></li><br /> <li><a href="#">烈火学院www.veryhuo.com</a></li><br /> </ul><br /> <ul class="hidden"><br /> <li><a href="#">2222222222222222222222</a></li><br /> <li><a href="#">2222222222222222222222</a></li><br /> <li><a href="#">2222222222222222222222</a></li><br /> <li><a href="#">2222222222222222222222</a></li><br /> <li><a href="#">2222222222222222222222</a></li><br /> <li><a href="#">2222222222222222222222</a></li><br /> </ul><br /> <ul class="hidden"><br /> <li><a href="#">3333333333333333333333</a></li><br /> <li><a href="#">3333333333333333333333</a></li><br /> <li><a href="#">3333333333333333333333</a></li><br /> <li><a href="#">3333333333333333333333</a></li><br /> <li><a href="#">3333333333333333333333</a></li><br /> <li><a href="#">3333333333333333333333</a></li><br /> </ul><br /> <ul class="hidden"><br /> <li><a href="#">4444444444444444444444</a></li><br /> <li><a href="#">4444444444444444444444</a></li><br /> <li><a href="#">4444444444444444444444</a></li><br /> <li><a href="#">4444444444444444444444</a></li><br /> <li><a href="#">4444444444444444444444</a></li><br /> <li><a href="#">4444444444444444444444</a></li><br /> </ul><br /> <ul class="hidden"><br /> <li><a href="#">5555555555555555555555</a></li><br /> <li><a href="#">5555555555555555555555</a></li><br /> <li><a href="#">5555555555555555555555</a></li><br /> <li><a href="#">5555555555555555555555</a></li><br /> <li><a href="#">5555555555555555555555</a></li><br /> <li><a href="#">5555555555555555555555</a></li><br /> </ul><br /> </div><br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 js+css实现点小图动态遮罩弹出大图特效CSS文章列表代码 DIV LI UL 的基本运用
