哪里有用层实现的tab页阿？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<TABLE border=0 style='width:180px;' id=tableall>
<TR>
<TD id=td1 onclick='test("1")'>tab1</TD>
<TD id=td2 onclick='test("2")'>tab2</TD>
<TD id=td3 onclick='test("3")'>tab3</TD>
</TR>
</table>
<div id=div1 style='background-color:#6B9C54;width:180px;height:160px;text-align:center;'>just i<br> love you </div></TD>
<div id=div2 style='background-color:#6B9C54;width:180px;height:160px;text-align:center;display:none'>just i<br> love you heihei</div>
<div id=div3 style='background-color:#6B9C54;width:180px;height:160px;text-align:center;display:none'>just i<br> love you haha</div>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--function test(id){
// o=document.all("div"+id);
for(i=1;i<=3;i++){
if (id==i){
document.all("td"+i).style.backgroundColor="#D64965";
o=document.all("div"+i);
o.style.display="";
otop=o.offsetTop;
oleft=o.offsetLeft;
while (o=o.offsetParent){otop+=o.offsetTop;oleft+=o.offsetLeft;}
document.all("div"+i).style.top=otop;
document.all("div"+i).style.left=oleft;
}
else
{
document.all("td"+i).style.backgroundColor="white";
document.all("div"+i).style.display="none";
}
}
}
//-->
</SCRIPT>

解决方案 »

  1.   

    给你画一个<HTML><HEAD>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    </HEAD>
    <BODY onselectstart="var $1=window.event.srcElement.tagName.toLowerCase();if($1!='input'&amp;&amp;$1!='textarea')window.event.returnValue=false;" style="BORDER-RIGHT: 1px inset; BORDER-TOP: 1px inset; BORDER-LEFT: 1px inset; BORDER-BOTTOM: 1px inset" bgColor=buttonface leftMargin=0 topMargin=0 scroll=auto width="100%" wsjTempFunc="null">
    <DIV id=DIV_TAB_xx_w_tab_xx_tab_test_12 style="DISPLAY: block; LEFT: 72px; OVERFLOW: hidden; POSITION: absolute; TOP: 33px" name="DIV_TAB_xx_w_tab_xx_tab_test_12"><SPAN id=TAB_xx_w_tab_xx_tab_test_12 style="FONT-WEIGHT: 400; FONT-SIZE: 9pt; OVERFLOW: hidden; WIDTH: 417px; FONT-STYLE: normal; FONT-FAMILY: Arial; HEIGHT: 107px; BACKGROUND-COLOR: buttonface; TEXT-ALIGN: left; TEXT-DECORATION: none" tabIndex=20 name="TAB_xx_w_tab_xx_tab_test_12">
    <DIV><SPAN title=page1 style="BORDER-RIGHT: thin outset; PADDING-RIGHT: 4px; BORDER-TOP: thin outset; PADDING-LEFT: 4px; FONT-WEIGHT: 400; Z-INDEX: 2; LEFT: 0px; PADDING-BOTTOM: 4px; BORDER-LEFT: thin outset; WIDTH: 48px; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: 0px; HEIGHT: 21px; BACKGROUND-COLOR: buttonface; TEXT-ALIGN: left">Page1</SPAN><SPAN title=page2 style="BORDER-RIGHT: thin outset; PADDING-RIGHT: 4px; BORDER-TOP: thin outset; PADDING-LEFT: 4px; FONT-WEIGHT: 400; LEFT: 48px; PADDING-BOTTOM: 4px; BORDER-LEFT: thin outset; WIDTH: 48px; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: 2px; HEIGHT: 21px; BACKGROUND-COLOR: buttonface; TEXT-ALIGN: left">Page2</SPAN></DIV><BUTTON style="BACKGROUND-POSITION: center top; Z-INDEX: 3; LEFT: 385px; BACKGROUND-IMAGE: url(/appwsj/weblibrary/image/arrow_prev.gif); VISIBILITY: hidden; WIDTH: 16px; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 0px; HEIGHT: 17px"></BUTTON><BUTTON 
    style="BACKGROUND-POSITION: left top; Z-INDEX: 3; LEFT: 401px; BACKGROUND-IMAGE: url(/appwsj/weblibrary/image/arrow_next.gif); VISIBILITY: hidden; WIDTH: 16px; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 0px; HEIGHT: 17px"></BUTTON><SPAN style="BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; DISPLAY: none; Z-INDEX: 1; LEFT: 0px; BORDER-LEFT: thin outset; WIDTH: 99.04%; BORDER-BOTTOM: thin outset; POSITION: absolute; TOP: 19px; HEIGHT: 78.5%; BACKGROUND-COLOR: buttonface"></SPAN>
    <DIV id=DIV_UO_xx_w_tab_xx_tab_test_xx_tabpage_1_12_1 style="BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; OVERFLOW-Y: hidden; Z-INDEX: 1; LEFT: 0px; OVERFLOW-X: hidden; OVERFLOW: hidden; BORDER-LEFT: thin outset; WIDTH: 413px; BORDER-BOTTOM: thin outset; POSITION: absolute; TOP: 19px; HEIGHT: 84px; BACKGROUND-COLOR: buttonface"><SPAN id=UO_xx_w_tab_xx_tab_test_xx_tabpage_1_12_1 style="LEFT: 0px; CURSOR: auto; POSITION: relative; TOP: 0px; HEIGHT: 100%; with: 100%" scrolling="no" frameBorder="0"></SPAN></DIV>
    <DIV id=DIV_UO_xx_w_tab_xx_tab_test_xx_tabpage_2_12_2 style="BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; OVERFLOW-Y: hidden; DISPLAY: none; Z-INDEX: 1; LEFT: 0px; OVERFLOW-X: hidden; OVERFLOW: hidden; BORDER-LEFT: thin outset; WIDTH: 413px; BORDER-BOTTOM: thin outset; POSITION: absolute; TOP: 19px; HEIGHT: 84px; BACKGROUND-COLOR: buttonface"><SPAN id=UO_xx_w_tab_xx_tab_test_xx_tabpage_2_12_2 style="LEFT: 0px; CURSOR: auto; POSITION: relative; TOP: 0px; HEIGHT: 100%; with: 100%" scrolling="no" frameBorder="0"></SPAN></DIV></SPAN></DIV>
     </BODY></HTML>
      

  2.   

    http://www.1000script.com/script/openarticle.asp?id=364