Windows 風格選項卡標簽_菜單導航特效

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

<HTML>
<HEAD>
<script>
var Num=4; 
var carNum=2+Num
function document.onselectstart()
{
var obj=event.srcElement 
if(obj.tagName=="SPAN")
{
return false;
}
}
function document.onmousedown()
{
var obj=event.srcElement
var 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
  mrc(i)
  }
  else
  {
  document.all("td"+i).style.backgroundColor="white"
  document.all("btn"+i).style.height=18
  }
 }
} 
}
function mrc(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://www.zhaotila.cn/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="mrc-type" mrc="text/html;charset=gb2312">
</HEAD>
<BODY bgcolor=FFFFFF onload=mrc(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>

所屬頻道：菜單導航特效/更新時間：2012-11-07

[收藏][報錯][返回列表]

相關菜單導航特效：

Windows 風格選項卡標簽_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些