如何用javascript在页面上实现类似平常窗口中选项卡的功能(tag)

可以用三个button和三个层,
点击第一个button显示第一个层，第二和第三个层隐藏
点击第二个button显示第一个层，第一和第三个层隐藏
点击第三个button显示第一个层，第一和第二个层隐藏

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我的javascript较差。能给点例子吗？谢谢 vivianfdlpw。
可以用三个button和三个层,
点击第一个button显示第一个层，第二和第三个层隐藏
点击第二个button显示第一个层，第一和第三个层隐藏
点击第三个button显示第一个层，第一和第二个层隐藏----------------------------------------------------
这家伙有点笨,如果模拟的选项卡的层多了那你不**死?应该是用三个button三个层
点一个button,隐藏上一次显示的层,同时显示现在要显示的层....具体有例子给你看看...
http://www.pniu.net/test/emotions/emotions.html这个本来是做在FCKEditor上的一个插件,只是一个例子,使用了OO设计,很简洁的,但也只是在特定环境下运行用的.但是你可以参考一下,另外做也很容易的.
<style>
td{border-width:2px;border-style:solid;border-color:blue}
div{width:100%;background-color:orange}
</style>
<script>
function show(num)
{
  var s;
  for(var i=1;i<=3;i++)
  {
    s=document.getElementById(i);
    if(i==num)
    {
      s.style.display='';
    }
    else
    {
      s.style.display='none';
    }
  }
}
</script>
<body>
<table>
<tr><td onclick="show(1)">选项卡1</td><td onclick="show(2)">选项卡2</td><td onclick="show(3)">选项卡3</td></tr>
</table>
<div id="1">选项卡1</div>
<div id="2" style="display:none">选项卡2</div>
<div id="3" style="display:none">选项卡3</div>
</body>
仿msn的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
BODY {
BACKGROUND: #1a60a8
}
body {
background-color: #1a60a8;
}
BODY {
MARGIN: 0px; PADDING-TOP: 4px
}body,td,th {
font-size: 12px;
}.sfii {
BORDER-TOP: #3e9dda 1px solid;FONT-SIZE: 1px
}
.sfii {
BACKGROUND: #2b7aba
}
.tab {
BORDER-LEFT: #3e9dda 1px solid;BORDER-RIGHT: #004e82 1px solid;BORDER-TOP: #3e9dda 1px solid;COLOR: #fff;CURSOR: hand
}
.tab {
BACKGROUND: url(/webinclude/images/msn/sfb-mb.gif) #1a60a8 repeat-x
}
.tab {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px
}
.tab A {
COLOR: #fff
}
.tab A:visited {
COLOR: #fff
}
.tab A:hover {
COLOR: #fff
}.tabsel {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.tabsel {
BACKGROUND: #5aa8da;BORDER-LEFT: #a2d8e9 1px solid;BORDER-TOP: #a2d8e9 1px solid;BORDER-RIGHT: #004e82 1px solid;COLOR: #fff;CURSOR: hand
}
.tabsel A {
COLOR: #fff
}
.tabsel A:visited {
COLOR: #fff
}
.tabsel A:hover {
COLOR: #fff
}
.terms {
COLOR: #fff;BORDER-TOP: #5f90c2 1px solid;FONT-SIZE: 11px;FONT-FAMILY: Tahoma
}
.terms A:hover {
COLOR: #fff
}
.terms A:visited {
COLOR: #fff
}
.sfi {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.sfi {
BORDER-BOTTOM: #5aa8da 1px solid;BORDER-TOP: #3e9dda 1px solid;FONT-SIZE: 1px
}
.sfi {
BACKGROUND: url(/webinclude/images/msn/sfb-mb.gif) #2b7aba repeat-x
}
.sfi A {
COLOR: #fff
}
.sfi B {
COLOR: #fff
}
.tb {
BACKGROUND: #5aa8da;COLOR: #004e82
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
     <td width="86" height="20" valign="bottom" ><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td height="14"> </td>
       </tr>
       <tr>
         <TD class=sfii height=8> </TD>
       </tr>
     </table></td>
     <td width="113"><img src="sft-mb.jpg" width="113" height="44"></td>
    <td valign="bottom"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="80" height="23"  class="tab" id=MUtd onClick="OnClickTd(0)">view1</td>
        <td width="80" height="23" class="tabsel" id=MUtd onClick="OnClickTd(1)">view1</td>
        <td class="tab" width="80" id=MUtd onClick="OnClickTd(2)"> </td>
        <td class="tab" width="80" id=MUtd onClick="OnClickTd(3)"> </td>
        <td class="sfi"> </td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" class="tb" cellpadding="0">
  <tr>
    <td><table width="200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td  > </td>
      </tr>
      <tr>
        <td bgcolor="#1a60a8" > </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
    </table></td>
    <td > </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table><TABLE id=Table1 height=29 cellSpacing=0 cellPadding=0 width=99% border=0>
  <TBODY>
    <TR>
      <TD class=terms height=29><NOBR>  © 2004 Tlp. 保留所有权利。</NOBR> <NOBR></NOBR></TD>
    </TR>
  </TBODY>
</TABLE>
<p></p>
<script language="javascript">
function OnClickTd(i)
{
for(x=0;x<MUtd.length;x++)
{
if(x!=i)
MUtd[x].className="tab";
else
MUtd[x].className="tabsel";
}
}
</script>
</body>
</html>