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

<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;">
>>更多  </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>