Windows 风格选项卡标签-滑动门选项卡

2018-10-16 20:53:04

字体：大中小

来源：转载

供稿：网友

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

Source Code to Run [www.cuoxin.com 错新网]

<HTML><HEAD><script>var Num=4;var carNum=2+Numfunction document.onselectstart(){var obj=event.srcElementif(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=20content(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=http://js.zz5u.net/images/logo.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简洁实用的滑动导航栏-滑动门选项卡