用js实现选项卡功能

来源:互联网 发布:好看的网站数据库 编辑:程序博客网 时间:2024/05/17 08:07

  <script type="text/javascript">
function ShowLayers(n,m)
{
 for(i=1;i<=m;i++)
 {
  eval("content" + i).style.display="none";
  eval("title"+i+".style.background=/"ffffff/";");
 }
 eval("title"+n+".style.background=/"cccccc/";");
 eval("content" + n).style.display="";
}
</script>

 

 <table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
  <tr>
    <td id="title1" bgcolor="#cccccc" style="height: 20px"><a onmouseover="javascript:ShowLayers(1,5);">标题1</a></td>
    <td id="title2" style="height: 20px"><a onmouseover="javascript:ShowLayers(2,5);">标题2</a></td>
    <td id="title3" style="height: 20px"><a onmouseover="javascript:ShowLayers(3,5);">标题3</a></td>
    <td id="title4" style="height: 20px"><a onmouseover="javascript:ShowLayers(4,5);">标题4</a></td>
    <td id="title5" style="height: 20px"><a onmouseover="javascript:ShowLayers(5,5);">标题5</a></td>
  </tr>
  <tr>
    <td height="100" colspan="5" bgcolor="cccccc">
 <div  id="content1" style="display:;">
 内容1
 </div>
 <div  id="content2" style="display:none;">
 内容2
 </div>
 <div  id="content3" style="display:none;">
 内容3
 </div>
 <div  id="content4" style="display:none;">
 内容4
 </div>
 <div  id="content5" style="display:none;">
 内容5
 </div>
 </td>
  </tr>
</table>