+ -
当前位置:首页 → 问答吧 → 能否简化一下这个js。

能否简化一下这个js。

时间:2010-05-11

来源:互联网

下面的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>
 提示:您可以先修改部分代码再运行

作者: mmfeel   发布时间: 2010-05-11

合成一个,传元素ID

作者: iaw2001200   发布时间: 2010-05-11

引用:
原帖由 iaw2001200 于 2010-5-11 16:18 发表
合成一个,传元素ID
我不是很懂,能指点一下吗?谢谢。

作者: mmfeel   发布时间: 2010-05-11

var $ = function(id){return document.getElementById(id)}  定义两边完全就是浪费。。第二个函数里面这个不用再定义了

2楼的意思是 2个函数写成一个  
showLayer(obj){
    if($(obj).style.display == "none")
              {
                     $(obj).style.display = "block"
              }
              else
              {
                     $(obj).style.display = "none"
              }

}

调用的时候就写showLayer(“aa”);showLayer(“bb”);

[ 本帖最后由 isayno 于 2010-5-12 09:46 编辑 ]

作者: isayno   发布时间: 2010-05-12


<!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(1); return false;">报表下载、上报</A> </td> </tr> <tr> <td vAlign=top> <div class="zibt" id="c01" 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="#" onclick="showLayer(2); return false;">组织台帐</A></td> </tr> <tr> <td height=4> <div class="zibt" id="c02" 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 class=bt onmouseover="this.className='bt_mouseover'" onclick=this.blur(); onmouseout="this.className='bt_mouseout'"><A href="#" onclick="showLayer(3); return false;">工作计划</A> </td> </tr> <tr> <td vAlign=top> <div class="zibt" id="c03" 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(id) { if($("c0"+id).style.display=="block") { $("c0"+id).style.display="none"; } else { for(var i=1 ; i<4 ; i++) { $("c0"+i).style.display="none"; if(i!=id) { } } $("c0"+id).style.display="block"; } } </script> </BODY> </HTML>
 提示:您可以先修改部分代码再运行

作者: qxq864298   发布时间: 2010-05-12