哪位高手有好的优化方法，这种写法一点水准都没有

谁有好的优化方法，这种写法一点水准都没有

HTML code

<div id="my"><span id="sp1"></span>-<span id="sp2"></span>-<span id="sp3"></span>-<span id="sp4"></span>    <!--tab 标签-->    <div id="con">         <!--4个内容区域-->         <div id="con1"></div>         <div id="con2" style="display:none;"></div>         <div id="con3" style="display:none;"></div>         <div id="con4" style="display:none;"></div>    </div>     <div id="bottom">         <!--4个底部区域-->         <div id="bt1"></div>         <div id="bt2" style="display:none;"></div>         <div id="bt3" style="display:none;"></div>         <div id="bt4" style="display:none;"></div>    </div></div><script>    function $(o){return document.getElementById(o);}    $(sp1).onclick=function(){      $(con1).style.display='block';      $(con2).style.display='none';      $(con3).style.display='none';      $(con4).style.display='none';      $(bt1).style.display='block';      $(bt2).style.display='none';      $(bt3).style.display='none';      $(bt4).style.display='none';    }    $(sp2).onclick=function(){      $(con1).style.display='none';      $(con2).style.display='block';      $(con3).style.display='none';      $(con4).style.display='none';      $(bt1).style.display='none';      $(bt2).style.display='block';      $(bt3).style.display='none';      $(bt4).style.display='none';    }    $(sp3).onclick=function(){      $(con1).style.display='none';      $(con2).style.display='none';      $(con3).style.display='block';      $(con4).style.display='none';      $(bt1).style.display='none';      $(bt2).style.display='none';      $(bt3).style.display='block';      $(bt4).style.display='none';    }    $(sp4).onclick=function(){      $(con1).style.display='none';      $(con2).style.display='none';      $(con3).style.display='none';      $(con4).style.display='block';      $(bt1).style.display='none';      $(bt2).style.display='none';      $(bt3).style.display='none';      $(bt4).style.display='block';    }</script>

HTML code

<div id="spDiv">    <span id="sp1">sp1</span>- <span id="sp2">sp2</span>- <span id="sp3">sp3</span>- <span id="sp4">sp4</span></div>
[解决办法]
其实我个人认为，有些东西你应该放在css中。这样看起来稍微好点
[解决办法]
JScript code
<div id="my"><span id="sp1" index="1"></span>-<span id="sp2" index="2"></span>-<span id="sp3" index="3"></span>-<span id="sp4" index="4"></span>    <!--tab 标签-->    <div id="con">         <!--4个内容区域-->         <div id="con1" ></div>         <div id="con2" style="display:none;"></div>         <div id="con3" style="display:none;"></div>         <div id="con4" style="display:none;"></div>    </div>     <div id="bottom">         <!--4个底部区域-->         <div id="bt1"></div>         <div id="bt2" style="display:none;"></div>         <div id="bt3" style="display:none;"></div>         <div id="bt4" style="display:none;"></div>    </div></div><script>    function $(o){return document.getElementById(o);}    var fnShowDiv=function(){      var index=this.index;      var con_divs=$("con").getElementsByTagName("div");      for(var i=0;i<con_divs.length;i++){        if(i==index-1){          con_divs[i].tyle.display='block';        }else{          con_divs[i].tyle.display='none';        }      }      var bot_divs=$("bottom").getElementsByTagName("div");      for(var i=0;i<bot_divs.length;i++){        if(i==index-1){          bot_divs[i].tyle.display='block';        }else{          bot_divs[i].tyle.display='none';        }      }    }    var spans = $("my").getElementsByTagName("span");    for(var i=0;i<spans.length;i++){      spans[i].onclick=fnShowDiv;    }</script> 
 
[解决办法]
简化一下：
JScript code
<script>    function $(o){return document.getElementById(o);}    var fnShowDiv=function(){      var index=this.index;      var con_divs=$("con").getElementsByTagName("div");      var bot_divs=$("bottom").getElementsByTagName("div");      for(var i=0;i<con_divs.length;i++){        if(i==index-1){          con_divs[i].tyle.display='block';          bot_divs[i].tyle.display='block';        }else{          con_divs[i].tyle.display='none';          bot_divs[i].tyle.display='none';        }      }    }    var spans = $("my").getElementsByTagName("span");    for(var i=0;i<spans.length;i++){      spans[i].onclick=fnShowDiv;    }</script>
[解决办法]
HTML code
    <div id="my">        <span id="sp1">A</span>-<span id="sp2">B</span>-<span id="sp3">C</span>-<span id="sp4">D</span>        <!--tab 标签-->        <div id="con">             <!--4个内容区域-->             <div id="con1">A</div>             <div id="con2" style="display:none;">B</div>             <div id="con3" style="display:none;">C</div>             <div id="con4" style="display:none;">D</div>        </div>         <div id="bottom">             <!--4个底部区域-->             <div id="bt1">A</div>             <div id="bt2" style="display:none;">B</div>             <div id="bt3" style="display:none;">C</div>             <div id="bt4" style="display:none;">D</div>        </div>    </div>    <script>        function $(o){return document.getElementById(o);}        function getIndex(elems, elem){            for(var i = 0, len = elems.length; i < len; i++){                if(elems[i] === elem){                    return i;                }            }            return -1;        }        function handle(elems, index){            for(var i = 0, len = elems.length; i < len; i++){                console.log((i === index) + ", "+elems[i].id);                elems[i].style.display = i === index ? 'block' : 'none';            }        }        var con_childs = $('con').children,            bottom_childs = $('bottom').children,            div = $('my'),            spans = div.getElementsByTagName('span');        div.onclick = function(event){            var e = event || window.event,                target = e.target || e.srcElement,                index;            if(target.tagName === 'SPAN'){                index = getIndex(spans, target);                handle(con_childs, index);                handle(bottom_childs, index);            }        }    </script>