能否简化一下这个js。

下面的js能否合成一个？
<!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="">
  <style>
  body {  
  font-family: "Verdana","宋体";
  font-size:12px;
margin:0;
padding:0;
}
a,a:visited {
color:#666666;
text-decoration:none;
}
a:hover{
    color:#ff0000;
    text-decoration:none;
}
ul, li{
    color:#999999;
    line-height:20px;
}
ol{ margin-top:6px;
    margin-left:16px;
    padding:0;
    list-style-type:none;
    color:#666666;
    }
table, td ,th{
margin:0;
padding: 0;
border:0;
font-size:12px;
}
img{     border:0;
padding:0;
margin:0;
}
.date{
         float:right;
         margin-right:12px;
}
#struct{
          margin:auto;
          width:1000px;
}
  #left_bg{
    background:url(../img/left_bg.jpg) #f4f4f4 repeat-x top left; }
.litop{ margin-top:10px;}
.view{ background:url(../img/view_bg1.jpg) no-repeat; padding-top:18px; padding-left:2px;}
.viewfont a{ color:#0b0b0b; font-size:11px; font-weight:bold;line-height:20px;}
.viewfont a:visited{ color:#0b0b0b; }
.viewfont a:hover{ color:#ff0000; }
.kuang_white{ border:1px #fff solid; background-color:#FFFFFF;}
</style>
 </HEAD>
 <BODY>
   <table cellSpacing=0 cellPadding=0 align=center border=0 >
    <tr>
      <td class=left_bg vAlign=top width="24%">
        <table cellSpacing=0 cellPadding=0 width="100%" border=0>
          <tr>
            <td class=bt onmouseover="this.className='bt_mouseover'" onclick=this.blur(); onmouseout="this.className='bt_mouseout'"><A href="#" onclick="showLayer(); return false;">报表下载、上报</A> </td>
          </tr>
          <tr>
            <td vAlign=top>
               <div class="zibt" id="aa" style="display:none">
                   <UL>
                       <LI><A href="#">隐患月报</A></LI>
                       <LI><A href="#">检查报表</A></LI>
                       <LI><A href="#">事故报表</A></LI></UL>
                </div>
            </td>
          </tr>
          <tr>
            <td height=4></td>
          </tr>
          <tr>
            <td class=bt onmouseover="this.className='bt_mouseover'" onclick=this.blur(); onmouseout="this.className='bt_mouseout'"><A href="#">组织台帐</A></td>
          </tr>
          <tr>
            <td height=4></td>
          </tr>
                    <tr>
            <td class=bt onmouseover="this.className='bt_mouseover'" onclick=this.blur(); onmouseout="this.className='bt_mouseout'"><A href="#" onclick="showLayer2(); return false;">工作计划</A> </td>
          </tr>
          <tr>
            <td vAlign=top>
                   <div class="zibt" id="bb" style="display:none">
                        <UL>
                            <LI><A href="#">年工作计划</A></LI>
                            <LI><A href="#">月工作计划</A></LI>
</UL>
                   </div>
            </td>
          </tr>
</table>
    <script type="text/javascript">
    var $ = function(id){return document.getElementById(id)}
function showLayer()
{
if($("aa").style.display == "none")
{
$("aa").style.display = "block"
}
else
{
$("aa").style.display = "none"
}
}
    </script>
    <script type="text/javascript">
    var $ = function(id){return document.getElementById(id)}
function showLayer2()
{
if($("bb").style.display == "none")
{
$("bb").style.display = "block"
}
else
{
$("bb").style.display = "none"
}
}
    </script>
 </BODY>
</HTML>

解决方案 »

  1.   


    <!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="">
      <style>
      body {  
         font-family: "Verdana","宋体";
         font-size:12px;
        margin:0;
        padding:0;
    }
    a,a:visited {
        color:#666666;
        text-decoration:none;
    }
    a:hover{
        color:#ff0000;
        text-decoration:none;
    }
    ul, li{
        color:#999999;
        line-height:20px;
    }
    ol{ margin-top:6px;
        margin-left:16px;
        padding:0;
        list-style-type:none;
        color:#666666;
        }
    table, td ,th{
        margin:0;
        padding: 0;
        border:0;
        font-size:12px;
    }
    img{     border:0;
        padding:0;
        margin:0;
    }
    .date{
             float:right;
             margin-right:12px;
    }
    #struct{
              margin:auto;
              width:1000px;
    }
      #left_bg{
        background:url(../img/left_bg.jpg) #f4f4f4 repeat-x top left; }
    .litop{ margin-top:10px;}
    .view{ background:url(../img/view_bg1.jpg) no-repeat; padding-top:18px; padding-left:2px;}
    .viewfont a{ color:#0b0b0b; font-size:11px; font-weight:bold;line-height:20px;}
    .viewfont a:visited{ color:#0b0b0b; }
    .viewfont a:hover{ color:#ff0000; }
    .kuang_white{ border:1px #fff solid; background-color:#FFFFFF;}    
    </style>
    <script type="text/javascript">
    function $(id){return document.getElementById(id)}
    function showhide(o){ var s=o.style.display;      o.style.display=s=='none'?'block':'none'}
    </script> </HEAD>
     <BODY>
       <table cellSpacing=0 cellPadding=0 align=center border=0 >
        <tr>
          <td class=left_bg vAlign=top width="24%">
            <table cellSpacing=0 cellPadding=0 width="100%" border=0>
              <tr>
                <td class=bt onmouseover="this.className='bt_mouseover'" onclick=this.blur(); onmouseout="this.className='bt_mouseout'"><A href="#" onclick="showhide($('aa')); return false;">报表下载、上报</A> </td>
              </tr>
              <tr>
                <td vAlign=top>
                   <div class="zibt" id="aa" style="display:none">
                       <UL>
                           <LI><A href="#">隐患月报</A></LI>
                           <LI><A href="#">检查报表</A></LI>
                           <LI><A href="#">事故报表</A></LI></UL>
                    </div>
                </td>
              </tr>
              <tr>
                <td height=4></td>
              </tr>
              <tr>
                <td class=bt onmouseover="this.className='bt_mouseover'" onclick=this.blur(); onmouseout="this.className='bt_mouseout'"><A href="#">组织台帐</A></td>
              </tr>
              <tr>
                <td height=4></td>
              </tr>
                        <tr>
                <td class=bt onmouseover="this.className='bt_mouseover'" onclick=this.blur(); onmouseout="this.className='bt_mouseout'"><A href="#" onclick="showhide($('bb')); return false;">工作计划</A> </td>
              </tr>
              <tr>
                <td vAlign=top>
                       <div class="zibt" id="bb" style="display:none">
                            <UL>
                                <LI><A href="#">年工作计划</A></LI>
                                <LI><A href="#">月工作计划</A></LI>
                            </UL>
                       </div>
                </td>
              </tr>
        </table>
     </BODY>
    </html>