一个很简单的JS实现的选项卡

时间:2021-09-11 06:28:10

<style>
.titles{
font-size:14px;
color:#07519a;
border-top:#d3d3d3 1px solid;
border-bottom:#d3d3d3 1px solid;
border-left:#d3d3d3 1px solid;
border-right:#d3d3d3 1px solid;
}
.contents
{
text-align=center;
font-size:12px;
height:240px;
border-bottom:#d3d3d3 1px solid;
border-left:#d3d3d3 1px solid;
border-right:#d3d3d3 1px solid;
}
</style>
<script>
function ShowLayers(n,m)
{
 for(i=1;i<=m;i++)
 {
  eval("content" + i).style.display="none";
  eval("title"+i+".style.color=/"07519a/";");
  eval("title"+i+".style.background=/"ffffff/";");
 
 }
 eval("title"+n+".style.background=/"eaedfc/";");
 eval("title"+n+".style.color=/"red/";");
 eval("content" + n).style.display="";
}
</script>
<table width="808" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
  <tr>
    <td height="25" width="93px" class="titles" id="title1"
  bgcolor="#eaedfc" style="color:red" align="center">
 <a onmouseover="javascript:ShowLayers(1,3);">标题一</a></td>
    <td height="25" width="93px" class="titles"  id="title2"
  align="center">
 <a onmouseover="javascript:ShowLayers(2,3);">标题二</a></td>
    <td height="25" width="93px" class="titles"  id="title3"
 align="center">
 <a onmouseover="javascript:ShowLayers(3,3);">标题三</a></td>
 <td width=529px height=25px class="titles" align="right" style="font-size:12px;">
 >>更多&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td height="240" colspan="5" bgcolor="ffffff">
  <div  id="content1" style="display:;" class="contents">
  内容1
  </div>
  <div  id="content2" style="display:none;" class="contents">
  内容2
  </div>
  <div  id="content3" style="display:none;" class="contents">
  内容3
  </div>
 </td>
  </tr>
</table>