作者：marvellous 時間： 2006-06-15 文檔類型：原創(chuàng) 來自：藍色理想
第 1 頁 仿windows選項卡效果拾零 [1] 第 2 頁 仿windows選項卡效果拾零 [2] 第 3 頁 仿windows選項卡效果拾零 [3] 第 4 頁 仿windows選項卡效果拾零 [4]
運行代碼框<html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Generator" content="EditPlus"> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> body,table,tr,td{ font-size:12px; color:#000000; } .sec1 { background-color: #99CC99; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF } .sec2 { background-color: #D4D0C8; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; } .main_tab { background-color: #D4D0C8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; } </style> <script language="javascript"> <!-- function secBoard(n,x,y) { for(i=0;i<secTable.cells.length;i++){ secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2";} for(i=0;i<mainTable.tBodies.length;i++){ mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block";} weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展館<b>"+y+"</b>樓展廳"; } //--> </script> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"> <table width="588" border="0" cellspacing="1" cellpadding="4" align="center"> <tr> <td width="82%">當前位置：展館分布 > <span id="weizi"><b>A</b>展館<b>1</b>樓展廳</span></td> <td width="18%"></td> </tr> <tr> <td colspan="2" height="1" bgcolor="#000000"></td> </tr> <tr> <td colspan="2" height="4"></td> </tr> <tr> <td colspan="2"> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable> <tr height=20 align=center> <td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展館1樓展廳</td> <td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展館2樓展廳</td> <td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展館1樓展廳</td> <td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展館2樓展廳</td> <td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展館1樓展廳</td> <td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展館2樓展廳</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab> <tbody style="display:block;"> <tr> <td align="center"> 一 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 二 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 三 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 四 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 五 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 六 </td> </tr> </tbody> </table> </td> </tr> </table> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
運行代碼框<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <base > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>無標題文檔</title> <script language="JavaScript"> var txtstr_1=" QQ:28983016 Email:<a href=mailto:451200@126.com>451200@126.com</a>"; var txtstr_2=" 需要軟件的朋友可以與我聯(lián)系。"; var txtstr_3=" 論壇現(xiàn)在暫時關閉，請朋友們在QQ上聯(lián)系." var txtstr_4=" 孤獨的時候便走向自然；<br>寂寞的時候便走向音樂；<br>失敗的時候便走向憧憬；<br>委屈的時候便走向創(chuàng)造和友情。<br>" function changediv(n){ for(i=1;i<=5;i++){ eval("document.getElementById('s'+i+'').className='under'+n+''"); //此次循環(huán)的作用是分別將s開頭的ID處的下邊界設置為相應的顏色 } for(i=1;i<=4;i++){ eval("document.getElementById('c"+i+"').className='a"+n+"'"); //此次循環(huán)初始化所有的選項卡按鈕的背景圖片為cb0.gif，銀灰色 } eval("document.getElementById('c"+n+"').className='t"+n+"'"); //然后設置鼠標移動到的相應位置的背景圖片為相應的圖片，修改對應的樣式表。 eval("document.getElementById('bodyt').className='body"+n+"'"); //修改選項卡下半部的樣式，使其的色彩與上半部的圖片相適應。 bodytxt=eval('txtstr_'+n); if(bodytxt==""){ alert("數(shù)據(jù)正在下載，請稍候!");} else { document.getElementById("txt1").innerHTML=bodytxt; //設置選項卡主體部分相應的文字。 } } </script> <style type="text/css"> <!-- .t1 { background-image: url(cb1.gif); border-bottom-width: medium; border-bottom-style: none; border-right-width: 1px; border-right-style: solid; border-right-color: #88c027; } .t2 { background-image: url(cb2.gif); padding-top: 3px; border-right-width: 1px; border-right-style: solid; border-right-color: #eac751; } .t3 { background-image: url(cb3.gif); padding-top: 3px; border-right-width: 1px; border-right-style: solid; border-right-color: #ee6f69; } .t4 { background-image: url(cb4.gif); padding-top: 3px; border-right-width: 1px; border-right-style: solid; border-right-color: #7eaffb; } .t0 { background-image: url(cb0.gif); padding-top: 3px; border-bottom-width: 0px; border-bottom-style: none; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } --> </style> <style type="text/css"> <!-- td { font-size: 12px; line-height: 16px; } .d1 { padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .d2{ padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .d3{ padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .d4{ padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .under1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #88c027; } .under2 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eac751; } .under3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ee6f69; } .under4 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #7eaffb; } .body1 { background-color: #d6efb5; border-top: 0px none; border-right: 1px solid #88c027; border-bottom: 1px solid #88c027; border-left: 1px solid #88c027; } .body2 { background-color:#fff7be; border-top: 0px none #eac751; border-right: 1px solid #eac751; border-bottom: 1px solid #eac751; border-left: 1px solid #eac751; } .body3 { background-color: #ffe5e3; border-top: 0px none; border-right: 1px solid #ee6f69; border-bottom: 1px solid #ee6f69; border-left: 1px solid #ee6f69; } .body4 { background-color: #d4eaff; border-top: 0px none; border-right: 1px solid #7eaffb; border-bottom: 1px solid #7eaffb; border-left: 1px solid #7eaffb; } .firstunderline { border-bottom-width: medium; border-bottom-style: none; } .bodytop { border-top-width: medium; border-top-style: none; } --> </style> <style type="text/css"> <!-- .a1 { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #88c027; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .a2 { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eac751; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .a3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ee6f69; background-image: url(cb0.gif); border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .a4 { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #7eaffb; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .temp { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #88c027; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } --> </style> </head> <body> <table width="294" border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign="bottom"> <td id="s1" width="8" height="19" class="under1"><br> </td> <td id="c1" width="60" align="center" class="t1" onMouseOver="changediv(1)">我佛山人</td> <td id="s2" width="8" class="under1"><br> </td> <td id="c2" width="60" align="center" class="temp" onMouseOver="changediv(2)">紅色黑客</td> <td id="s3" width="8" class="under1"><br> </td> <td id="c3" width="60" align="center" class="temp" onMouseOver="changediv(3)">藍色月光</td> <td id="s4" width="8" class="under1"><br> </td> <td id="c4" width="60" align="center" class="temp" onMouseOver="changediv(4)"">孤零飄客</td> <td id="s5" width="49" class="under1"><br> </td> </tr> </table> <table width="294" height="94" border="0" align="center" cellpadding="0" cellspacing="0" class="body1" id="bodyt"><tbody> <tr> <td valign="top"><br><div id="txt1"> <script language="javascript"> document.write(txtstr_1); </script> </div> </td> </tr> </tbody> </table> <p> </p> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
運行代碼框<html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Generator" content="EditPlus"> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> body,table,tr,td{ font-size:12px; color:#000000; } .sec1 { background-color: #99CC99; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF } .sec2 { background-color: #D4D0C8; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; } .main_tab { background-color: #D4D0C8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; } </style> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"> <table width="588" border="0" cellspacing="1" cellpadding="4" align="center"> <tr> <td width="82%">當前位置：展館分布 > <span id="weizi">A展館1樓展廳</td> <td width="18%"></td> </tr> <tr> <td colspan="2" height="1" bgcolor="#000000"></td> </tr> <tr> <td colspan="2" height="4"></td> </tr> <tr> <td colspan="2"> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTableA> <tr height=20 align=center> <td class=sec1 id="A7" onClick="secBoard()">A展館1樓展廳</td> <td class=sec1 id="A8" onClick="secBoard()">B展館1樓展廳</td> <td class=sec1 id="A9" onClick="secBoard()">B展館2樓展廳</td> <td class=sec1 id="A10" onClick="secBoard()">C展館1樓展廳</td> <td class=sec1 id="A11" onClick="secBoard()">C展館2樓展廳</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTableB> <tr height=20 align=center> <td class=sec2 id="B1" onClick="secBoard()">A展館1樓展廳</td> <td class=sec1 id="B2" onClick="secBoard()">A展館2樓展廳</td> <td class=sec1 id="B3" onClick="secBoard()">B展館1樓展廳</td> <td class=sec1 id="B4" onClick="secBoard()">B展館2樓展廳</td> <td class=sec1 id="B5" onClick="secBoard()">C展館1樓展廳</td> <td class=sec1 id="B6" onClick="secBoard()">C展館2樓展廳</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab> <tbody style="display:block;"> <tr> <td align="center"> 一 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 二 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 三 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 四 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 五 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 六 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 七 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 八 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 九 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 十 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 十一 </td> </tr> </tbody> </table> <!--放在這里安全點 #:-) --> <script language="javascript"> <!-- var lastObj="B1",strClassBlur="sec1",strClassActive="sec2"; var tbody=document.getElementById("mainTable").getElementsByTagName("TBODY"); var secTableA=document.getElementById("secTableA"); var secTableB=document.getElementById("secTableB"); function secBoard() { var n=event.srcElement.id; if(lastObj == n)return; if(n.charAt(0) != lastObj.charAt(0)) secTableA.swapNode(secTableB); eval(n).className=strClassActive; titleChange(eval(n).innerText); eval(lastObj).className=strClassBlur; tbody[getNum(lastObj)].style.display="none"; tbody[getNum(n)].style.display="block"; lastObj=n; } function getNum(str) { return parseInt(str.substr(1))-1; } function titleChange(text) { weizi.innerText=text; } //--> </script> </td> </tr> </table> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
運行代碼框<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <style type="text/css"> <!-- body{font-family: 'MS Shell Dlg', 宋體, Tahoma;font-size: 12px;background-color: #336699;color:#000000;} td, div, input, textarea{font-family: 'MS Shell Dlg', 宋體, Tahoma;font-size: 12px;cursor: default;} .title{background-color: #000080;color:#fdf7d3;padding: 1;font-family:宋體;font-size:12px;} .up{background-color: #cccccc;color:#000000;border: 2px outset #ffffff} .down{background-color: #cccccc;border:2px inset #ffffff} .up1{background-color: #cccccc;color: #000000;border: 1px outset #ffffff} .down1{background-color:#cccccc;border:1px inset #ffffff} .l { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff; border-right: 2px outset #ffffff; color:#000000; border-top: 2px outset #ffffff; padding-top: 2;height:18} .lc { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff; border-right: 2px outset #ffffff; color:#000000; border-top: 2px outset #ffffff; padding-top: 2;height:20} .l-h { background-color: #cccccc; border-left: 2px outset #ffffff ; border-top: 2px outset #ffffff;color:#000000; } .l-c { background-color: #cccccc; border-top: 2px outset #ffffff } .l-r { background-color: #cccccc; border-right: 2px outset #ffffff; border-top: 2px outset #ffffff;color:#000000;} .l-hc { background-color: #cccccc; border-left: 2px outset #ffffff;color:#000000;} .l-cc { background-color: #cccccc;color:#000000; } .l-rc { background-color: #cccccc; border-right: 2px outset #ffffff;color:#000000;} td{color:#000000;} --> </style> <title>顯示屬性－www.51windows.Net</title> </head> <body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no> <SCRIPT LANGUAGE="JavaScript"> <!-- function restore() { td1.className="l";td2.className="l";td3.className="l";td4.className="l";td5.className="l";td6.className="l"; td_1.className="l-h";td_2.className="l-c";td_3.className="l-c";td_4.className="l-c";td_5.className="l-c";td_6.className="l-c"; w1.style.display="none";w2.style.display="none";w3.style.display="none";w4.style.display="none";w5.style.display="none";w6.style.display="none"; } function c1() { td1.className="lc"; td_1.className="l-hc"; w1.style.display="block"; } function c2() { td2.className="lc"; td_2.className="l-cc"; w2.style.display="block"; } function c3() { td3.className="lc"; td_3.className="l-cc"; w3.style.display="block"; } function c4() { td4.className="lc"; td_4.className="l-cc"; w4.style.display="block"; } function c5() { td5.className="lc"; td_5.className="l-cc"; w5.style.display="block"; } function c6() { td6.className="lc"; td_6.className="l-cc"; w6.style.display="block"; } //--> </SCRIPT> <form name="free" method="post" target="_target"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="400" height="61"> <tr> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c1();><div id="td1" class="lc">背景</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c2();><div id="td2" class="l">屏保</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c3();><div id="td3" class="l">外觀</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c4();><div id="td4" class="l">Web</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c5();><div id="td5" class="l">效果</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c6();><div id="td6" class="l">設置</div></td> <td width="50" height="20" align="center" valign="bottom" ></td> <td width="50" height="20" align="center" valign="bottom"></td> </tr> <tr style=""> <td width="50" height="1" align="center" class="l-hc" id="td_1" > </td> <td width="50" height="1" align="center" class="l-c" id="td_2"> </td> <td width="50" height="1" align="center" class="l-c" id="td_3"> </td> <td width="50" height="1" align="center" class="l-c" id="td_4"> </td> <td width="50" height="1" align="center" class="l-c" id="td_5"> </td> <td width="50" height="1" align="center" class="l-c" id="td_6"> </td> <td width="50" height="1" align="center" class="l-c" id="td_"> </td> <td width="50" height="1" align="center" class="l-r" id="td_"> </td> </tr> <tr> <td width="398" height="360" class="up" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5"> <p align="center"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="325"> <tr> <td width="100%" height="280"> <div align="center"> <center> <div style="display:" id=w1><h1>AAAAAAAAAAAA</h1></div> <div style="display:none" id=w2><h1>BBBBBBBBBBBBB</h1></div> <div style="display:none" id=w3><h1>CCCCCCCCCCCCC</h1></div> <div style="display:none" id=w4><h1>DDDDDDDDDDDD</h1></div> <div style="display:none" id=w5><h1>EEEEEEEEEEEEEE</h1></div> <div style="display:none" id=w6><h1>FFFFFFFFFFFFFFFFF</h1></div> </center> </div> </td> </tr> </table> </div> </td> </tr> </center> </table> </div> </form> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
運行代碼框<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> <!-- * { margin: 0; padding:0 } body { margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; height: auto; width: auto; background-color: #666666; font-size: 12px; color: #000000; } #container { text-align: left; width: 760px; height: 400px; background-color: #FFFFFF; padding: 20px; } #container #title { height: 28px; } #container #title li { float: left; list-style-type: none; height: 28px; line-height: 28px; text-align: center; margin-right: 1px; } #container #title ul { background-color: #FFFFFF; height: 28px; } #container #title a { text-decoration: none; color: #000000; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -29px; } #container #title a span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -29px; padding: 0 15px 0 15px; } #container #title #tag1 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px; } #container #title #tag1 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title #tag2 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px; } #container #title #tag2 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title #tag3 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px; } #container #title #tag3 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title #tag4 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px; } #container #title #tag4 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title #tag5 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px; } #container #title #tag5 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #title .selectli1 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px; } #container #title a .selectspan1 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title .selectli2 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px; } #container #title a .selectspan2 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title .selectli3 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px; } #container #title a .selectspan3 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title .selectli4 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px; } #container #title a .selectspan4 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title .selectli5 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px; } #container #title a .selectspan5 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #content ul {margin: 10px;} #container #content li {margin: 5px; } #container #content li img {margin: 5px;display:block;} #container #content { height: 300px; padding: 10px; } .content1 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #3A81C8; border-right-color: #3A81C8; border-bottom-color: #3A81C8; border-left-color: #3A81C8; background-color: #DFEBF7; } .content2 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #ff950b; border-right-color: #ff950b; border-bottom-color: #ff950b; border-left-color: #ff950b; background-color: #FFECD2; } .content3 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FE74B8; border-right-color: #FE74B8; border-bottom-color: #FE74B8; border-left-color: #FE74B8; background-color: #FFECF5; } .content4 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #00988B; border-right-color: #00988B; border-bottom-color: #00988B; border-left-color: #00988B; background-color: #E8FFFD; } .content5 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #A8BC1F; border-right-color: #A8BC1F; border-bottom-color: #A8BC1F; border-left-color: #A8BC1F; background-color: #F7FAE2; } .hidecontent {display:none;} --> </style> <script language="javascript"> function switchTag(tag,content) { // alert(tag); // alert(content); for(i=1; i <6; i++) { if ("tag"+i==tag) { document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i; document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i; }else{ document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className=""; } if ("content"+i==content) { document.getElementById(content).className=""; }else{ document.getElementById("content"+i).className="hidecontent"; } document.getElementById("content").className=content; } } </script> </head> <body> <div id="container"> <div id="title"> <ul> <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首頁</span></a></li> <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下載中心</span></a></li> <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>產(chǎn)品介紹</span></a></li> <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>會員注冊與登錄</span></a></li> <li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>聯(lián)系我們</span></a></li> </ul> </div> <div id="content" class="content1"> <div id="content1"><p>仿淘寶網(wǎng)站的導航效果。此方法有幾個優(yōu)點：</p>1、根據(jù)字數(shù)自適應項目長度</div> <div id="content2" class="hidecontent">2、不同的項目使用不同的顏色來區(qū)分</div> <div id="content3" class="hidecontent">3、這回需要使用到js了，呵呵</div> <div id="content4" class="hidecontent">4、背景圖片只需要兩個圖片文件就足夠，減少服務器負擔</div> <div id="content5" class="hidecontent">5、這是使用到的兩個圖片： <table width="58%" border="1" cellspacing="2" cellpadding="0"> <tr> <td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td> <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td> </tr> </table> </div> </div> </div> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
出處：藍色理想 責任編輯：moby
上一頁 仿windows選項卡效果拾零 [1] 下一頁 仿windows選項卡效果拾零 [3]
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
藍色理想版權申明：除部分特別聲明不要轉載，或者授權我站獨家播發(fā)的文章外，大家可以自由轉載我站點的原創(chuàng)文章，但原作者和來自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來自一節(jié)，自行鏈接）。文章版權歸我站和作者共有。
轉載要求：轉載之圖片、文件，鏈接請不要盜鏈到本站，且不準打上各自站點的水印，亦不能抹去我站點水印。
特別注意：本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯(lián)系，版權歸原作者所有，文章若有侵犯作者版權，請與我們聯(lián)系，我們將立即刪除修改。
第 1 頁 
第 2 頁 仿windows選項卡效果拾零 [2]
