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

最后标签切换后全部隐藏了。。求解

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<title>TaoBao search</title>
<style type="text/css">
@font-face{
font-family: iconfont;src:url(http://at.alicdn.com/t/font_1404975816_925991.eot);
src:url(http://at.alicdn.com/t/font_1404975816_925991.eot?#iefix) format("embedded-opentype"),
url(http://at.alicdn.com/t/font_1404975816_925991.woff) format("woff"),
url(http://at.alicdn.com/t/font_1404975816_925991.ttf) format("truetype"),
url(http://at.alicdn.com/t/font_1404975816_925991.svg#uxiconfont) format("svg")}
body{
/* margin: 0;
padding: 0; */
font:12px/1.5 tahoma,arial,sans-serif;
}
a{
text-decoration: none;
}
.search-container{
/* margin: 10px; */
position: relative;
} 
.search-tips{
float: right;
padding: 3px 0 0 5px;
}
.search-tips a{
color: #9E9E9E;
}
.search-button{
float: right;
}
.btn-search{
background: #f50;
border: none;
color: #fff;
width: 100px;
height: 47px;
font-size: 16px;
font-weight: bold;
line-height: 45px;
cursor: pointer;
}
.btn-search:hover{
background: #FF1900;
}

.search-common-pannel{
height: 41px;
background: #f50;
overflow: hidden;
padding: 3px 0 3px 77px;
}
.search-common-pannel input{
height: 39px;
line-height: 39px;
width: 100%;
border: 0 none;
outline: 0;
background: #fff;
}
.search-common-pannel i{
position: absolute;
top: 14px;
left: 86px;
z-index: 2;
color: #ccc;
}
.iconfont{
font-family: iconfont;
font-size: 12px;
font-style: normal;
}
ul{list-style: none;display: block;}
ul,li{margin: 0; padding: 0}
.search-list{
position: absolute;
top: 3px;
left: 3px;
width: 72px;
height: 41px;
overflow: hidden;
background: #fff;
border-left: 1px solid #f6f6f6;
border-right: 1px solid #e5e5e5;
text-align: center;
}
.search-list li{
display: none;
height: 41px;
line-height: 41px;
}
.search-list li a{
color:#6c6c6c;
}

#search-tab .selected{
background: #f6f6f6;
display: block;
}
.trigger-hover{
height: auto;
}
.trigger-hover li{
display: block;
}
</style>
<script type="text/javascript">
function myReady(fn){
if( document.addEventListener ){
document.addEventListener("DOMContentLoaded",fn,false);
}else{
IEcld(fn);
}

function IEcld(fn){
var d = window.document;
var done = false;
var init = function () {
if(!done) {
done = true;
fn();
}
};

(function(){
try{
d.documentElement.doScroll('left');
}catch(e){
setTimeout(arguments.callee,50);
return;
}
init();
})();

d.onreadystatechange = function (){
if (d.readyState == 'complete'){
d.onreadystatechange = null ;
init();
}
};
}
}
var getDOM = function(id){
return document.getElementById(id);
};
var addEvent = function(id,event,fn){
var el = getDOM(id)||dcoument;
if(el.addEventListener){
el.addEventListener(event,fn,false);
}else{
el.attachEvent('on'+event,fn);
}
};

myReady(function(){
addEvent('search-tab','mouseover',function(){
this.className+=' trigger-hover';
});
addEvent('search-tab','mouseout',function(){
this.className='search-list';
});
addEvent('tab_1','mouseover',function(){
if(this.className.indexOf('selected')<0){
this.className+=' selected';
}
});
addEvent('tab_1','mouseout',function(){
this.className='';
});
addEvent('tab_2','mouseover',function(){
if(this.className.indexOf('selected')<0){
this.className+=' selected';
}
});
addEvent('tab_2','mouseout',function(){
this.className='';
});

addEvent('tab_1','click',function(){
getDOM('search-tab').className = 'search-list';
});
addEvent('tab_2','click',function(){
getDOM('search-tab').className = 'search-list';
});
});

</script>
</head>
<body>
<div>
<div id="search-tab">
<ul>
<li id="tab_1"><a href="#">宝贝</a></li>
<li id="tab_2"><a href="#">店铺</a></li>
</ul>
</div>
<div>
<form>
<div><a href="#">高级<br />搜索</a></div>
<div>
<button type="submit">搜 索</button>
</div>
<div>
<input type="text" x-webkit-speech="" />
<i>&#xe613;</i>
</div>
</form>
</div>
</div>
</body>
</html>