2 jolinadmin jolinadmin 于 2014.07.31 15:25 提问

网页设计,有一段代码太冗长了,求帮忙优化下!!!感激不尽!!!

在最底下的那一段script代码太冗长了,求帮忙优化下,感激不尽!!!
以下是己完成的代码:

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
.explain_box{ float:left; padding-top:23px; padding-left:2px; font-family:"宋体";}
            .explain_nav li{ float:left; height:39px;display:inline;  margin:0px 2px}
            .explain_nav li a{ float:left; width:108px; height:21px; background:#ededed; color:#000000; font-size:14px; padding:6px 0px; text-align:center;}
            .explain_nav li a.act{ float:left; width:108px; height:25px; background:url(images/new_pro/explain_nav_bg.png) no-repeat; color:#ffffff;}
            .explain_cont{ float:left; width:675px;border: solid 1px #cf2849; display:block; margin-top:14px;position:relative; display:none;}
            .explain_cont_left{ float:right; width:109px; background:#ededed; text-align:center; height:100%;display:block; position:absolute; }
            .explain_cont_right{ float:right; width: 500px;padding: 14px 33px; background:#f9f9f9;}
            .explain_cont_right h1{ color:#c80a30; font-size:14px;}
            .explain_cont_right p{ color:#555555; font-size:12px;}

            .left_img01{ position:absolute; top:50%; left:50%; margin: -21px 0 0 -21px;}
</style>
<div class="explain_box" style="">
<ul class="explain_nav">  
<li ><a id="a_sgff" href="javascript:show(1)">施工方法</a></li>
<li ><a id="a_lrhql" href="javascript:show(2)">理论耗漆量</a></li>
<li ><a id="a_xs" href="javascript:show(3)">稀  释</a></li>
<li ><a id="a_ctsj" href="javascript:show(4)">重涂时间</a></li>
<li ><a id="a_sgtj" href="javascript:show(5)">施工条件</a></li>
<li style="display:none"><a id="a_bysj" href="javascript:show(6)">保养时间</a></li>
<li style=""><a id="a_qx" href="javascript:show(7)">清  洗</a></li>
<li style=""><a id="a_cc" href="javascript:show(8)">储  存</a></li>
<li style=""><a id="a_tztx" href="javascript:show(9)">涂装体系</a></li>
<li style="display:none"><a id="a_yqpd" href="javascript:show(10)">油漆配对</a></li>
<li style="display:none"><a id="a_gzsj" href="javascript:show(11)">干燥时间</a></li>
<li style="display:none"><a id="a_tzhcl" href="javascript:show(12)">涂装后处理</a></li>
<li style="display:none"><a id="a_dccl" href="javascript:show(13)">底材处理</a></li>
<li style="display:none"><a id="a_cpggsm" href="javascript:show(14)">产品规格说明</a></li>
<li style="display:none"><a id="a_bzsjsm" href="javascript:show(15)">包装升级说明</a></li>
</ul></div>

                      <div class="explain_cont" id="sgff">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img01.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>施工方法</h1>
                            <p>滚涂/刷涂/无气喷涂</p>
                          </div>
                        </div>

                       <div class="explain_cont" id="lrhql">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img02.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>理论耗漆量</h1>
                            <p>12 平方米/升/单遍(干膜30微米计)
因实际施工表面的粗糙程度和稀释比例不同,耗漆量也有所不同
</p>
                          </div>
                        </div>

                        <div class="explain_cont" id="xs">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img03.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>稀  释</h1>
                            <p>使用前应搅拌均匀<br> 
为达到最佳涂刷效果,滚涂、刷涂时可根据实际情况使用不多于10%(体积比)的清水稀释(可根据施工手感酌情增减)<br> 
若使用无气喷涂,可根据实际情况使用不多于5%(体积比)的清水稀释
</p>
                          </div>
                        </div>

                        <div class="explain_cont" id="ctsj">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img04.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>重涂时间</h1>
                            <p>(以干膜30微米,25~30℃计)<br>
表干:30分钟<br>
硬干:60分钟<br>
重涂:间隔2小时以上 (温度过高或温度略低,应适当延长),但最长在一周内重涂。<br>     
如果超过7天没有涂刷面漆,请打磨底漆以保证良好的附着力。
</p>
                          </div>
                        </div>

                        <div class="explain_cont" id="sgtj">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img05.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>施工条件</h1>
                            <p>请不要在潮湿或寒冷的天气(气温低于5℃,相对湿度大于85%)情况下施工,否则不能达到预期的涂装效果</p>
                          </div>
                        </div>

                        <div class="explain_cont" id="bysj">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img06.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>保养时间</h1>
                            <p></p>
                          </div>
                        </div>

                        <div class="explain_cont" id="qx">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img07.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>清  洗</h1>
                            <p>涂装中途停顿及涂装完毕后,请及时使用清水清洗所有器具</p>
                          </div>
                        </div>

                        <div class="explain_cont" id="cc">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img08.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>储  存</h1>
                            <p>密闭存于0-35℃阴凉干燥处</p>
                          </div>
                        </div>

                        <div class="explain_cont" id="tztx">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img12.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>涂装体系</h1>
                            <p><p><img alt="" width="544" height="366" src="/res/image/201421411491.jpg" /><!--StartFragment --></p>
<div>&nbsp;<img alt="" width="544" height="579" src="/res/image/2014214114952.jpg" /></div>
<p><img alt="" width="544" height="83" src="/res/image/201421411509.jpg" /></p></p>
                          </div>
                        </div>

                        <div class="explain_cont" id="yqpd">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img03.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>油漆配对</h1>
                            <p></p>
                          </div>
                        </div>

                        <div class="explain_cont" id="gzsj">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img04.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>干燥时间</h1>
                            <p></p>
                          </div>
                        </div>

                        <div class="explain_cont" id="tzhcl">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img11.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>涂装后处理</h1>
                            <p></p>
                          </div>
                        </div>

                        <div class="explain_cont" id="dccl">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img09.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>底材处理</h1>
                            <p></p>
                          </div>
                        </div>

                        <div class="explain_cont" id="cpggsm">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img13.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>产品规格说明</h1>
                            <p></p>
                          </div>
                        </div>

                        <div class="explain_cont" id="bzsjsm">
                          <div class="explain_cont_left">
                            <div class="left_img01"> <img src="images/new_pro/icon_img14.png" /> </div>
                          </div>
                          <div class="explain_cont_right">
                            <h1>包装升级说明</h1>
                            <p></p>
                          </div>
                        </div>
<script>
function show(val){

    var b1 = document.getElementById('sgff');
    var b2 = document.getElementById('lrhql');
    var b3 = document.getElementById('xs');
    var b4 = document.getElementById('ctsj');
    var b5 = document.getElementById('sgtj');
    var b6 = document.getElementById('bysj');
    var b7 = document.getElementById('qx');           
    var b8 = document.getElementById('cc');
    var b9 = document.getElementById('tztx');
    var b10 = document.getElementById('yqpd');
    var b11 = document.getElementById('gzsj');
    var b12 = document.getElementById('tzhcl');
    var b13 = document.getElementById('dccl');
    var b14 = document.getElementById('cpggsm');
    var b15 = document.getElementById('bzsjsm');

    var a1 = document.getElementById('a_sgff');
    var a2 = document.getElementById('a_lrhql');
    var a3 = document.getElementById('a_xs');
    var a4= document.getElementById('a_ctsj');
    var a5 = document.getElementById('a_sgtj');
    var a6 = document.getElementById('a_bysj');
    var a7 = document.getElementById('a_qx');           
    var a8 = document.getElementById('a_cc');
    var a9 = document.getElementById('a_tztx');
    var a10 = document.getElementById('a_yqpd');
    var a11 = document.getElementById('a_gzsj');
    var a12 = document.getElementById('a_tzhcl');
    var a13 = document.getElementById('a_dccl');
    var a14 = document.getElementById('a_cpggsm');
    var a15 = document.getElementById('a_bzsjsm');
    if (val=="1"){
        a1.className='act';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='block';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
        }
    else if(val=="2"){
        a1.className='';
        a2.className='act';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='block';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';   
    }
    else if(val=="3"){
        a1.className='';
        a2.className='';
        a3.className='act';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='block';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="4"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='act';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='block';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="5"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='act';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='block';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="6"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='act';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='block';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="7"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='act';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='block';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="8"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='act';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='block';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="9"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='act';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='block';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="10"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='act';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='block';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="11"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='act';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='block';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="12"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='act';
        a13.className='';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='block';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="13"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='act';
        a14.className='';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='block';
        b14.style.display='';
        b15.style.display='';
    }
    else if(val=="14"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='act';
        a15.className='';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='block';
        b15.style.display='';
    }
    else if(val=="15"){
        a1.className='';
        a2.className='';
        a3.className='';
        a4.className='';
        a5.className='';
        a6.className='';
        a7.className='';
        a8.className='';
        a9.className='';
        a10.className='';
        a11.className='';
        a12.className='';
        a13.className='';
        a14.className='';
        a15.className='act';
        b1.style.display='';
        b2.style.display='';
        b3.style.display='';
        b4.style.display='';
        b5.style.display='';
        b6.style.display='';
        b7.style.display='';
        b8.style.display='';
        b9.style.display='';
        b10.style.display='';
        b11.style.display='';
        b12.style.display='';
        b13.style.display='';
        b14.style.display='';
        b15.style.display='block';
    }
}
</script>

1个回答

u014134561
u014134561   2014.11.09 12:04

b1.style.display='';
b2.style.display='';
b3.style.display='';
b4.style.display='';
b5.style.display='';
b6.style.display='';
b7.style.display='';
b8.style.display='';
b9.style.display='';
b10.style.display='';
b11.style.display='';
b12.style.display='';
b13.style.display='';
b14.style.display='';
b15.style.display='block';

像这种酒可以放到for循环中

Csdn user default icon
上传中...
上传图片
插入图片