层切换代码

来源：互联网发布：淘宝网禁出售有毒编辑：程序博客网时间：2024/05/19 00:37
层切换代码如下：
<!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>
  <DIV  id=hotarticle style="OVERFLOW: hidden; HEIGHT: 262px; width:400px;background:#f1f5cc; border:1px solid #003399;">
    <div  style="border-bottom:1px solid #003399;">
     <A   style=" cursor:pointer;"onmouseover="javascript:setTab('hotarticle','week');">标签1</A>|
     <A   style=" cursor:pointer;" onMouseOver="javascript:setTab('hotarticle','month');">标签2</A>|
     <A   style=" cursor:pointer;" onmouseover="javascript:setTab('hotarticle','all');">标签3</A> |
     <A  style=" cursor:pointer;" onmouseover="javascript:setTab('hotarticle','other');">标签4</A>
   </div>
   <DIV class=tabcontent id=week>
   第一个层的内容
   </DIV>
   <DIV class=tabcontent id=month style="DISPLAY: none">
   第二个层的内容
   </DIV>
  <DIV class=tabcontent id=all style="DISPLAY: none">
  第三个层的内容
   </DIV>
   <DIV class=tabcontent id=other style="DISPLAY: none">
  第四个层的内容
   </DIV>
 </DIV>
</BODY>
</HTML>
<script language="javascript">
function setTab(area,id) {
    var tabArea=document.getElementById(area);
    var contents=tabArea.childNodes;
    for(i=0; i<contents.length; i++) {
        if(contents[i].className=='tabcontent'){
        contents[i].style.display='none';
        }
    }
    document.getElementById(id).style.display='';
    
}
</script>