                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /搜索框制作

为什么淘宝的tab切换最后都变成空白的了

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>淘宝搜索框</title>
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
   <div>
       <div>
           <form action="">
               <div class="search-txt fl">
                   <input type="text" x-webkit-speech="">
                   <i class="fa fa-search"></i>
               </div>
               <div class="search-btn fl">
                   <button id="btn" type="submit">搜索</button>
               </div>

               <div class="search-tips fr">
                   <a href="#">高级<br>搜索</a>
               </div>
               <div></div>
           </form>
           <div   id="search-tab">
               <ul>
                   <li id="tab-1"><a href="#">宝贝</a></li>
                   <li id="tab-2"><a href="#">店铺</a></li>
               </ul>
           </div>
       </div>
   </div>
   <script>
       var getDOM = function(id){
           return document.getElementById(id);
       }
       // var x = getDOM("tab-2").innerHTML;
//       alert(x);

       var addEvent = function(id,event,fn){
           var el = getDOM(id) || document;
           if(el.addEventListener){
               el.addEventListener(event,fn,false);
           }else if(el.attachEvent){
               el.attachEvent('on'+event,fn);
           }
       }
       addEvent('search-tab','mouseover',function(){
           this.className += "trigger-hover";
           // this.style.height = "auto";
       })
       addEvent('tab-1','mouseover',function(){
           if(this.className.indexOf('selected')<0){
               this.className += 'selected';
           }
       })
       addEvent('tab-1','mouseout',function(){
           this.className = '';
       })
       addEvent('tab-1','click',function(){
           // this.className += 'selected';
           getDOM('search-tab').className = 'trigger';

       })
       addEvent('tab-2','mouseover',function(){
           if(this.className.indexOf('selected')<0){
               this.className += 'selected';
           }
       })
       addEvent('tab-2','mouseout',function(){
           this.className = '';
       })
       addEvent('tab-2','click',function(){
           // this.className += 'selected';
           getDOM('search-tab').className = 'trigger';

       })
   </script>
</body>
</html>

下面是样式表

@charset "utf-8";
*{
   margin:0;
   padding:0;
   font-size:12px;
   font-family: "宋体" "Helvetic" "Arial";
   box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
}
ul{
   list-style: none;
}
a{
   text-decoration:none;
   color: #8e8e8e;
}
.fl{
   float: left;
}
.fr{
   float:right;
}
.clearfix{
   clear:both;
}

.search-container{
   width:90%;
   margin:100px auto 0;
   position: relative;
}

.search-pannel{
   width:60%;
   margin:0 auto;
   position: relative;
   /*overflow: hidden;*/
}
.search-pannel .search-txt{
   width:80%;
   height: 36px;
   line-height: 36px;
   background-color: #f40;
   padding-left: 10%;
   /*padding:3px 0 3px 79px;*/
   /*overflow: hidden;*/
}
.search-txt input{
   width:100%;
   line-height:30px;
   background-color: #fff;
   border:0;
   outline: 0;
   padding:0 5px;
}
.search-pannel .search-btn{
   width:10%;
}
.search-btn button{
   width:100%;
   height:36px;
   background-color: #f40;
   border:0;
   outline:0;
   color:#fff;
   font:400 1.5em "微软雅黑";
   letter-spacing: 5px;
   padding-left: 5px;
   cursor:pointer;
}
.search-pannel .search-tips{
   /*padding:5px 0 0 5px;*/
   width: 10%;
   padding-left: 10px;
   line-height: 18px;
}
.search-tips a:hover{
   color:#f40;
}
.search-txt i{
   color:#ccc;
   font-size:12px;
   position: absolute;
   top:35%;
   left:11%;
}

#search-tab{
   width:72px;
   /*height:30px;*/
   border:1px solid #e8e8e8;
   background-color: #fff;
   overflow: hidden;
   position:absolute;
   top:3px;
   left:3px;
}
.trigger{
   height:30px;
}
.trigger-hover{
   height:auto;
   display: block;
}
#search-tab .selected{
   background-color: #f9f9f9;
   display: block;
}
.trigger-hover li{
   display: block;
}
.trigger li{
   display: none;
}
#search-tab li{
   height:30px;
   line-height: 30px;
   text-align: center;
}