您现在的位置：陈设世家 >> 网络垃圾桶 >> 知识碎片 >> 备用知识 >> 文章正文rss

仿windows选项卡效果拾零

仿windows选项卡或叫做tabpan以及tabpage，现在还有最新的进展譬如仿淘宝网导航菜单效果皆属于此类：

var controlID = document.uniqueID.toString();
    var html = "<table id='" + controlID + "' width='" + width + "' border='0'><tbody><tr><td>"
             +      tabTitleHtml 
             +      "<table border='0' cellspacing='0' cellpadding='0' width='" + width 
             +          " ' height='" + height +"' class='TabPage'>"
             +              tabPageHtml 
             +      "</table>"
             + "</td></tr></tbody></table>";
//             window.clipboardData.setData('text', html);
    document.write(html);
    document.getElementById(controlID).rows[0].cells[0].children[0].rows[0].cells[0].click();
}

// 调用例子一
new TabPage(200, 50,GetFirstLetterArray(), GetPinYinArray()  );

// 调用例子二
var titleArray = new Array(
    new Array(1, 2, 3, 4),
    new Array(5, 6, 7, 8),
    new Array(9, 10, 11, 12),
    new Array(13, 14, 15, 16));
var pageArray =  
    new Array(1, 2,3 ,4, 5,6,7,8,9,10,11,12,13,14,15,16);
new TabPage(200, 50,titleArray, pageArray  );

</script>
 <style type="text/css">
 
.TabTitle { 
    text-align: center;
    background-color:#99CC99;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #F0F0F0;
    border-top: 1px solid #F0F0F0;
    border-right: 1px solid gray;
    border-bottom: 1px solid #F0F0F0
    }
.SelectedTabTitle { 
    text-align: center;
    background-color:  #D2D8D8;
    cursor: hand;
    color: blue;
    border-left: 1px solid #F0F0F0; 
    border-top: 1px solid #F0F0F0; 
    border-right: 1px solid gray; 
    }
.TabPage {
    background-color:  #D2D8D8;
    color: #000000;
    border-left:1px solid #F0F0F0;
    border-right: 1px solid gray;
    border-bot<a class="channel_keylink" href="http://www.tom.com">TOM</a>: 1px solid gray; 
    }
</style>

查看演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tab Effect Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="http://vip.5d.cn/allinhands/M/file/2-sample.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function tabit(id,cid) {
tab5d.className="taboff";tabcv.className="taboff";tabbi.className="taboff";id.className="tabon";
c5d.style.display="none";ccv.style.display="none";cbi.style.display="none";cid.style.display="block";
//winname=cid;
}

function showall() {
tab5d.className="tabon";tabcv.className="tabon";tabbi.className="tabon";
c5d.style.display="block";ccv.style.display="block";cbi.style.display="block";
}
</script>
</head>

<body onLoad="tabit(tab5d,c5d)">
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td height="20" class="taboff" id="tab5d" style="cursor:hand" onClick="tabit(tab5d,c5d)" width="25%">5DMedia</td>
    <td class="taboff" id="tabcv" style="cursor:hand" onClick="tabit(tabcv,ccv)" width="25%">ChinaVisual</td>
    <td class="taboff" id="tabbi" style="cursor:hand" onClick="tabit(tabbi,cbi)" width="25%">Bluediea</td>
   <td width="25%">&nbsp;</td>
  </tr>
  <tr id="c5d" style="display:none"> 
    <td colspan="4" class="tdbody"> <p><strong><br>
        <img src="/Article/bin/200612/20061227191128201.gif" width="88" height="31"><br>
        <br>
        5DMedia</strong><br>
        <a href="http://www.5dmedia.com">http://www.5dmedia.com</a><br>
        <a href="http://www.5dmedia.com/bbs">http://www.5dmedia.com/bbs</a> </p>
      </td>
  </tr>
  <tr id="ccv" style="display:none">
    <td colspan="4" class="tdbody"><strong><br>
      <img src="/Article/bin/200612/20061227191128575.gif" width="88" height="31"><br>
      <br>
      ChinaVisual</strong><br>
      <a href="http://www.chinavisual.com">http://www.chinavisual.com</a> <br>
      <a href="http://forum.chinavisual.com">http://forum.chinavisual.com</a> 
    </td>
  </tr>
  <tr id="cbi" style="display:none"> 
    <td colspan="4" class="tdbody"><strong><br>
      <img src="/Article/bin/200612/20061227191128235.gif" width="88" height="31"><br>
      <br>
      Blueidea</strong><br>
      <a href="http://www.bluedidea.com">http://www.bluedidea.com</a> <br>
      <a href="http://www.blueidea.com/bbs">http://www.blueidea.com/bbs</a></td>
  </tr>
</table>

<p>&nbsp;</p>
<p align="center">Powered By <a href="mailto:allinhands@chinavisual.com">Allinhands</a>.QQ:1707477<br>
  Notice:No Order these sites above!</p>

查看演示

<div id=page_1 class=WebTabs-external-page-container>
	<div class=WebTabs-internal-page-container>
		<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">
			<tr>
				<td width="100%" align="center">
<table><tr><td id="theTD">
<a href="###" onclick="document.getElementById('theTD').bgColor='yellow';">点我一下试试看？</a>
</td></tr></table>

</td>
			</tr>
		</table>
	</div>
</div>

</td>
			</tr>
		</table>
	</div>
</div>

</td>
			</tr>
		</table>
	</div>
</div>

</td>
			</tr>
		</table>
	</div>
</div>

查看演示

<STYLE type=text/css>.sec1 {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee
}
.sec2 {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
	BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOT<a class="channel_keylink" href="http://www.tom.com">TOM</a>: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>

            <SCRIPT language=javascript>
     function secBoard(n)
  {
    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";
  }
      </SCRIPT>
<p align="center">

            <TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
              <TBODY>
              <TR align=middle height=20>
                
    <TD class=sec2 onclick=secBoard(0) width="10%">1</TD>
                
    <TD class=sec1 onclick=secBoard(1) width="10%">2</TD>
                
    <TD class=sec1 onclick=secBoard(2) width="10%">3</TD>
                
    <TD class=sec1 onclick=secBoard(3) 
              width="10%">4</TD>
  </TR></TBODY></TABLE>
            <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 
            cellPadding=0 width=549 border=0>
              <TBODY style="DISPLAY: block">
              <TR>
                <TD vAlign=top align=middle><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      
          <TD><center><img src="tutu16.gif"><BR>

<table><tr><td style="width:80;height:20;background-color:blue" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='blue'"></td></tr></table>
<BR></TD></TR></TBODY></TABLE></TD></TR></TBODY>
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=middle><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      
          <TD><center><img src="tutu24.gif"><BR>
 
<form name="form1" method="post" action="">
  <select name="select" style="background:#FF0000;color:white">
    <option >凤，风之羽也。</option>
    <option>ddddddddddddd</option>
    <option>ddddddddddddddddd</option>
    <option>eeeeeeeeeeeeeeee</option>
    <option>eeeeeeeeeeeeeeee</option>
  </select>
</form>

</TD></TR></TBODY></TABLE></TD></TR></TBODY>
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=middle><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      
        <TD><center><img src="tutu30.gif"><BR>
<style type="text/css">
<!--
.formstyle { font-family: "宋体"; font-size: 10pt; color: #FF0000; background-color: #FFFFCC}

-->
</style>
<center>
<form name="form1" method="post" action="">
<select name="select" class="formstyle">
<option value="a1.html">menu1</option>
<option value="a4.html" selected>menu2</option>
<option value="a8.html">menu3</option>
</select>
</form>

<BR></TD></TR></TBODY></TABLE></TD></TR></TBODY>
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=middle><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      
          <TD><center><img src="tutu34.gif"><br>
<table border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
  <tr>
    <a href="a12.html"><td bgcolor="#FFFFFF" onMouseOver="this.style.color='#ffffff'; this.style.background='#003399'" onMouseOut="this.style.color='#003399'; this.style.background='#ffffff'" style="cursor: hand">恰在似与不似之间</td></a>
  </tr>
</table>

</TD>
        </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></p>

查看演示

<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
  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,"滚动字幕")
//End
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=/Article/bin/200612/20061227191128890.gif width=250>"
}
if(i==3)
{
span1.innerHTML="<h1>第三个内容</h1>"}
if(i==4)
{
span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>"
+"<tr><td>aaaaaaaa</td></tr>"
+"<tr><td>bbbbbbbb</td></tr>"
+"<tr><td>ccccccccc</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></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-bot<a class="channel_keylink" href="http://www.tom.com">TOM</a>:2 outset">
<span id=span1></span>
</div>
</td></tr></table>

查看演示

<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-bot<a class="channel_keylink" href="http://www.tom.com">TOM</a>: 1px solid gray; 
    }
</style>    <script language="javascript">

</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>

查看演示

上一篇文章：怎样减少电脑死机的情况

下一篇文章：仿windows选项卡效果拾零2

作者：佚名文章来源：本站原创点击数：更新时间：2006-12-27

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

更多关于仿windows选项卡效果拾零的文章
仿windows选项卡效果拾零4 仿windows选项卡效果拾零3 仿windows选项卡效果拾零2

热门影视
最新电视剧

·用博客寻找爱情	·厦门人就上厦门顶牛社区	·星期天去哪聚会	·免费发布企业招聘
·在线一亿片视频观看	·挑战美女无极限	·创建我的书签	·我要卖东西,买东西

仿windows选项卡效果拾零

更多关于 仿windows选项卡效果拾零 的文章

更多关于仿windows选项卡效果拾零的文章