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

Question

<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>

Answer 1

你有很多已经是display:none。。为什么js里还要去控制了这部多余了？！

Answer 2

还有就是你不觉得你选择器都没写对吗？
$(sp1)这是什么啊?!$("#sp1")

Answer 3

不好意思我看错了。。没看到 function $(o){return document.getElementById(o);}
这句

Answer 4

我在想如果有10个，20个tab，，而且id没有规律性，，那不要写死人了

Answer 5

span外套一个，使用事件委托，监听事件target对象id
<div id="spDiv">
<span id="sp1">sp1</span>- <span id="sp2">sp2</span>- <span id="sp3">sp3</span>- <span id="sp4">sp4</span>
</div>
为了保持可维护性，把id写到数组里边
var sps = ['sp1', 'sp2', 'sp3', 'sp4'];
var cons = ['con1', 'con2', 'con3', 'con4'];
var bts = ['bt1', 'bt2', 'bt3', 'bt4'];document.getElementById('spDiv').onclick = function (event) {
var event = (event || window.event);
var target = event.target || event.srcElement; for (var i = 0; i < sps.length; i++) {
var style = (sps[i] === target.id) ? 'block' : 'none';
document.getElementById(cons[i]).style.display = style;
document.getElementById(bts[i]).style.display = style;
}
};

Answer 6

其实我个人认为，有些东西你应该放在css中。这样看起来稍微好点

Answer 7

<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>

Answer 8

简化一下：<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>

Answer 9

<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>