JavascriptTAB切换 AND JqueryTAB切换

前端半年纪念。

在线演示地址：

JS版本 http://jsbin.com/yumubaxeho/edit?html,output

JQ版本 http://jsbin.com/jifuqaheda/edit?html,output

CSS部分

*{margin: 0; padding: 0;}
  #tab_nav { width: 306px; height: 30px;}
  #tab_nav span {float: left; width:100px;border: 1px solid #333;font-size: 20px; height: 30px;text-align: center; line-height: 30px; cursor: pointer; }
  #tab_nav span.click { background: #ff5656; color: #fff;}
  #tab_content { width: 304px;}
  #tab_content div {width: 304px; height: 200px; display: none;border: 1px solid #333;}
  #tab_content div.show { display: block;}

HTML部分

<div id="tab_nav">
   <span>A</span>
   <span>B</span>
   <span>C</span>
</div>

<div id="tab_content">
   <div>AAAA</div>
   <div>BBBB</div>
   <div>CCCC</div>
</div>

JS部分

      var tab_nav  = document.getElementById('tab_nav').getElementsByTagName('span');
      var tab_content  = document.getElementById('tab_content').getElementsByTagName('div');
      tab_nav[0].className = "click";
      tab_content[0].className = "show";
      for(var i=0; i < tab_nav.length; i++){
        tab_nav[i].index = i;
        tab_nav[i].addEventListener('mouseover',function(){
          for(var j=0; j<tab_nav.length; j++){
              tab_nav[j].className = "";
              tab_content[j].className = "";
          }
          this.className = "click";
          tab_content[this.index].className = "show";
        });
      }

JQ部分

      var tab_nav     =  $('#tab_nav').find('span');
      var tab_content =  $('#tab_content').find('div');
      tab_nav.eq(0).addClass('click');
      tab_content.eq(0).addClass('show');
      tab_nav.on('mouseover',function(){
        $(this).addClass('click').siblings().removeClass();
        tab_content.eq($(this).index()).addClass('show').siblings().removeClass();
      });