一款普通的Tab网页选项卡切换，js+css代码。也可以叫做标签式导航栏，点击后更换对应的内容，而并非是鼠标滑过就改变内容，网页上经常见到的一种导航形式。 示例： <!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=utf-8" /><br /> <title>纯JS网页TAB选项卡</title><br /> <script type="text/javascript"><br /> function $(id){<br /> return document.getElementById(id);<br /> }<br /> window.onload=function(){<br /> var tabs = $("menus-tab"),<br /> lis = tabs.getElementsByTagName("li"),<br /> content = $("content"),<br /> divs = content.getElementsByTagName("div"),<br /> clearAllClass = function(arr,name){<br /> var lens = arr.length,re = new RegExp(name,'gi');<br /> for(var j = 0;j<lens;j++){<br /> if(re.test(arr[j].className)){<br /> arr[j].className = arr[j].className.replace(re,'');<br /> }<br /> }<br /> return arr;<br /> },<br /> addClass = function(o,name){<br /> var re = new RegExp(name,'gi');<br /> if (!re.test(o.className)) o.className += " "+name;<br /> return o;<br /> };<br /> for(var i=0 ,len=lis.length;i<len;i++){<br /> ~function(a){<br /> lis[a].onclick = function(){<br /> addClass(clearAllClass(lis,'on')[a],'on');<br /> addClass(clearAllClass(divs,'show')[a],'show');<br /> }<br /> }(i);<br /> }<br /> }<br /> </script><br /> <style type="text/css"><br /> *{margin:0;padding:0;}<br /> body{font:12px Verdana, Arial, Helvetica, sans-serif;}<br /> ul{list-style:none;}<br /> #tab{margin:20px auto;padding:10px;width:330px;border:1px solid #ccc;}<br /> #tab ul{overflow:hidden;zoom:1;}<br /> #tab li{float:left;margin-right:8px;width:100px;height:18px;line-height:18px;border:1px solid red;border-bottom:0;cursor:pointer;text-align:center;}<br /> #tab li.on{background:#fc0; color:000;}<br /> #content{border:1px solid #666;}<br /> #content div{padding:10px;display:none;}<br /> #content div.show{display:block;}<br /> </style><br /> </head><br /> <body><br /> <div id="tab"><br /> <ul id="menus-tab"><br /> <li class="on">tab1</li><br /> <li>tab2</li><br /> <li>tab3</li><br /> </ul><br /> <div id="content"><br /> <div class="show">A</div><br /> <div>B</div><br /> <div>C</div><br /> </div><br /> </div><br /> </body><br /> </html><br /><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a>提示：可修改后代码再运行! 文章导航 纯CSS三级菜单，兼容IE6横向、下拉级联代码JS多级横向联动选择菜单，模拟淘宝级联效果
