在最底下的那一段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> <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>
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循环中