CSS滑动门，布局在同一页面中，同时对原版的代码时行优化，现在感觉简洁多了，示例向我们展示了如何在同一个页面中布局选项卡，这很实用，记得有朋友以前问到过。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">< html>< head>< title>CSS滑动门及选项卡,布局在同一页面</title>< meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />< style type="text/css"> *{margin:0;padding:0;} body{margin:50px;} li{list-style:none;} div{width:210px;} #tab1 ,#tab2{width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;1122123<img src=http://p1.mb5u.com/texiao/3/20100522231321315.gif _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231321315.gif>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231321315.gif) repeat-x;} #tab1 ul ,#tab2 ul{margin:0;padding:0;} #tab1 li,#tab2 li{float:left;padding:0 30px;height:34px;line-height:34px;text-align:center;border-right:1px #ebf7ff solid;cursor:pointer;} #tab1 li.now,#tab2 li.now{color:#5299c4;background:#fff;font-weight:bold;} .tablist{width:378px;height:100px;padding:10px;font-size:14px;line-height:24px;border:1px #cfedff solid;border-top:0;display:none;} .block{display:block; }< /style>< script type="text/javascript"> function setTab(m,n){ var menu=document.getElementById("tab"+m).getElementsByTagName("li"); var div=document.getElementById("tablist"+m).getElementsByTagName("div"); // www.mb5u.com var showdiv=[]; for (i=0; j=div[i]; i++){ if ((" "+div[i].className+" ").indexOf(" tablist ")!=-1){ showdiv.push(div[i]); } } for(i=0;i<menu.length;i++) { menu[i].className=i==n?"now":""; showdiv[i].style.display=i==n?"block":"none"; } }< /script>< /head>< body>< div id="tab1">< ul>< li onmouseover="setTab(1,0)" class="now">ASP</li>< li onmouseover="setTab(1,1)">AJAX</li>< li onmouseover="setTab(1,2)">PHP</li>< li onmouseover="setTab(1,3)">CGI</li>< /ul>< /div>< div id="tablist1">< div class="tablist block">< span><div>ASP</div></span>< /div>< div class="tablist">< span>AJAX< /span>< /div>< div class="tablist">< span>PHP</span>< /div>< div class="tablist">< span>CGI</span>< /div>< /div>< br>< div id="tab2">< ul>< li onclick="setTab(2,0)" class="now">TAB_A</li>< li onclick="setTab(2,1)">TAB_B</li>< li onclick="setTab(2,2)">TAB_C</li>< /ul>< /div>< div id="tablist2">< div class="tablist block"> TAB_A< /div>< div class="tablist">< span>TAB_B</span>< /div>< div class="tablist">< span>TAB_C</span>< /div>< /div>< /body>< /html>
。