Windows 風格選項卡標簽

2024-09-05 12:20:24

字體：大中小

供稿：網(wǎng)友

Windows 風格的選項卡標簽，主要是指顏色和樣式風格和系統(tǒng)的幾乎是一樣的，只不過這是用JS模擬的，作者水平真高哦，如果你想建立一個仿WINDOWS一樣的網(wǎng)頁的話，這種風格值得借鑒的。

<HTML><HEAD><script>var Num=4; var carNum=2+Numfunction document.onselectstart(){var obj=event.srcElement if(obj.tagName=="SPAN"){return false;}}function document.onmousedown(){var obj=event.srcElementvar pobj=obj.parentElement.id;if(obj.className=="span"){ for(i=1;i<carNum;i++) {  if(pobj==("btn"+i))  {  document.all("td"+i).style.backgroundColor="menu"  document.all("btn"+i).style.height=20  content(i)  }  else  {  document.all("td"+i).style.backgroundColor="white"  document.all("btn"+i).style.height=18  } }} }function content(i){mnuItem(1,"系統(tǒng)設置")mnuItem(2,"高級選項")mnuItem(3,"環(huán)境變量")mnuItem(4,"自定義")mnuItem(5,"幫助")if(i==1){span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女<br>"+"<input><br><input><br><input type=submit>"}if(i==2){span1.innerHTML="<img src=/d/file/p/2024/09-05/a7aea9cfd99e48b765a43a8ef52bc12e.gif>"}if(i==3){span1.innerHTML="<h3>環(huán)境變量設置的具體內(nèi)容</h3>"}if(i==4){span1.innerHTML="<table border=1 width=100%><td>自定義</td></tr>"+"<tr><td>ASP</td></tr>"+"<tr><td>PHP</td></tr>"+"<tr><td>ASP.NET</td></tr></table>"}if(i==5){span1.innerHTML="<marquee>"+"有什么問題可以找?guī)椭?/marquee>"}}function mnuItem(i,con){document.all("MenuName"+i).innerText=con}</script><style>td{font-size:9pt}.span{cursor:default;padding-left:5;padding-top:2;padding-right:5;padding-bottom:0;width:100%;height:100%;}</style><TITLE>Windows 風格選項卡標簽</TITLE><META http-equiv="content-type" content="text/html;charset=gb2312"></HEAD><BODY bgcolor=FFFFFF onload=content(1) onselectstart="return false"><p><table width=0 onselectstart="return false" bgcolor=menu align=center><tr><td><table cellpadding=0 cellspacing=0 onselectstart="return false"> <tr height=20><td valign=bottom> <table cellspacing=0 cellpadding=0 bgcolor=menu>  <tr>  <td width=1 height=1></td><td width=1 height=1></td>  <td bgcolor=white></td><td></td><td></td>  </tr>  <tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td>  <td></td><td bgcolor=black></td><td></td>  </tr>  <tr><td width=1 bgcolor=white></td><td width=1 height=1></td>  <td id=btn1 height=20><span id="iwvjtn8m0"    class=span id=MenuName1> </span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td>  </tr>  <tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=menu id=td1></td>  </tr> </table></td><script>for(i=2;i<carNum;i++){tdBody="<td valign=bottom>"tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=menu>"tdBody+="<tr>"tdBody+="<td width=1 height=1><//td><td width=1 height=1><//td>"tdBody+="<td bgcolor=white><//td><td></td><td></td>"tdBody+="<//tr>"tdBody+="<tr><td width=1 height=1><//td><td width=1 height=1 bgcolor=white><//td>"tdBody+="<td></td><td bgcolor=black><//td><td></td>"tdBody+="<//tr>"tdBody+="<tr><td width=1 bgcolor=white><//td><td width=1 height=1><//td>"tdBody+="<td id=btn"+i+" height=18><span id="iwvjtn8m0"    class=span id=MenuName"+i+"> <//span></td><td width=1 bgcolor=gray><//td><td bgcolor=black width=1><//td>"tdBody+="<//tr>"tdBody+="<tr><td bgcolor=white><//td><td colspan=4 height=1 bgcolor=white id=td"+i+"><//td>"tdBody+="<//tr>"tdBody+="<//table>"tdBody+="<//td>";document.write(tdBody)}</script></td><td style="border-bottom:1 white solid" width=50> </td> </tr></table><div style="padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset"><span id=span1></span></div></td></tr></table></body></html>

上一篇：CSS+JS簡潔實用的滑動導航欄

下一篇：面試時候?qū)懙腃SS橫向二級菜單