jQuery实现的tab页

js文件
<script >
    var tabs = "tab1";
    $(document).ready(
     function(){
         $(".list_tab span:first").addClass("current"); //为第一个span添加 .current 的样式，默认选中
         $(".list_tab ul:not(:first)").hide(); //ul 不是第一个时隐藏
         $("#tab1").click();
         $(".list_tab span").mouseover(   //鼠标经过span样式
            function(){
                if($(this).attr("id") != tabs){
                    $(this).addClass("hover");
                }   
         });
         $(".list_tab span").mouseout(   //鼠标离开span样式
             function(){
                 $(this).removeClass("hover");
          });
      $(".group_list_tab span").click(
       function(){ //鼠标移到 span 上时触发函数
        $(".list_tab span").removeClass("current"); //为第一个 span 移除 .current 样式
        $(this).removeClass("hover"); //为触发的 span 去除鼠标经过样式
        $(this).addClass("current"); //为触发的 span 添加样式
        $(".list_tab ul").hide(); //隐藏 ul
        tabs = $(this).attr("id");
        $("."+$(this).attr("id")).show(); //这句是核心，class(.) 和触发 span 的ID 一致的 fadeIn(渐显)
       }
      );
     }
    );
   </script>
html文件：
<div class="list_tab">
    <div class="input_tag_outline">
     <span id="tab1">111</span>
     <span id="tab2">222</span>
     <span id="tab3">333</span>
     <span id="tab4">444</span>
     <span id="tab5">555</span>
     <span id="tab6">666</span>
     <span id="tab7">777</span>
     <span id="tab8">888</span>
    </div>
    <ul class="tab1">
      111
    </ul>
    <ul class="tab2">
       222
    </ul>
    <ul class="tab3">
       333
    </ul>
    <ul class="tab4">
      444
    </ul>
    <ul class="tab5">
      555
    </ul>
    <ul class="tab6">
      666
    </ul>
    <ul class="tab7">
      777
    </ul>
    <ul class="tab8">
      888
    </ul>
   </div>