CSS滑动门及选项卡,布局在同一页面_层和布局特效
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>
。