js tab 封装 --样式加载问题

<style typee="text/css">
                 *{margin:0;padding:0;}
                 ul,li{list-style: none; list-style-type: none;}
                 a{text-decoration: none;}
                 body{width:980px; margin:auto;}
                 #tab{width:980px; height:540px; overflow:hidden; }
                 #tab .tabpane{width:600px; height:40px;background-color:#dfe;}
                 #tab .tabpane li{ display: inline-block;width:140px; border-bottom: none;}
                 #tab .tabpane li a{display:block;width:138px; height:40px; line-height:40px; text-align: center;}
                 #tab .tabpane li a:hover{ background-color:#ffffee; border:1px solid #eeefff; border-bottom: none;}
                        .tabhover{ background-color:#ffffee; border:1px solid #eeefff; border-bottom: none;}
                 #tab .contents {width:600px;height:500px; background-color:#ffe; }
                 #tab .contents li{display:inline; width:600px;height:500px;float:left;}
                          .conhover{width:600px;height:500px;}
                 .hidden{display:none;}
</style>
    <script type="text/javascript">
                      function  tabCl(param){
                        tabPanel=param['tablePanel'];
                        tabDefaultStyle=param['tabDefaultStyle']|| '';
                        conDefaultStyle=param['conDefaultStyle']|| '';
                        defaultIndex=param['defaultIndex'] || 0;
                        tabHoverStyle=param['tabHoverStyle'] || 'hover';                        conHoverStyle=param['conHoverStyle'] || '';
                         menues= _$(tabPanel).getElementsByTagName('ul')[0].getElementsByTagName('li');
                        contents=_$(tabPanel).getElementsByTagName('ul')[1].getElementsByTagName('li');
                         hidden="hidden";
                         len=menues.length;
                         currentIndex=defaultIndex;                          for(var i=0;i<len;i++){
                              _setClass(menues[0],tabHoverStyle);
                            //  _setClass(contents[0],conHoverStyle);
                              _setClass(contents[1],hidden);                            //  _setClass(menues[i],tabDefaultStyle);
                              (function(i){
                                  menues[i].onmouseover=function(){                                      var old=menues[currentIndex];                                      _setClass(old,tabDefaultStyle);                                      _setClass(contents[currentIndex],hidden);                                      var cur=menues[i];
                                      _setClass(cur,tabHoverStyle);                                      currentIndex=i;                                      _setClass(contents[i],'');                                  }
                              })(i);
                              }
                          _setClass(menues[currentIndex],tabHoverStyle);
                          _setClass(contents[currentIndex],'');
                         function _$(ele){return typeof ele=='string' ? document.getElementById(ele):ele;}
                         function _setClass(ele,cla){
                             console.log("current ele "+ele.toString()+"current class is "+cla);
                             ele.style.className=cla;}
                               }
    </script>
</head>
<body>
        <div id="tab">
              <ul class="tabpane">
                  <li><a href="javascript:void(0)">团购</a></li>
                  <li><a href="javascript:void(0)">婚庆</a></li>
                  <li><a href="javascript:void(0)">二手交易</a></li>
              </ul>
            <ul class="contents">
                <li>团购</li>
                <li>婚庆</li>
                <li>二手交易</li>
            </ul>
        </div>
       <script type="text/javascript">           tabCl({'tablePanel':'tab','tabHoverStyle':'tabhover','conHoverStyle':'conhover'});       </script>