Windows 风格选项卡标签

2024-09-05 12:20:24

字体：大中小

来源：转载

供稿：网友

Windows 风格的选项卡标签，主要是指颜色和样式风格和系统的几乎是一样的，只不过这是用JS模拟的，作者水平真高哦，如果你想建立一个仿WINDOWS一样的网页的话，这种风格值得借鉴的。

<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,"系统设置")mnuItem(2,"高级选项")mnuItem(3,"环境变量")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>环境变量设置的具体内容</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>"+"有什么问题可以找帮助！</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 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 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简洁实用的滑动导航栏

下一篇：面试时候写的CSS横向二级菜单