                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /搜索框制作

有問題啊動態(tài)實現(xiàn)上，切換tab不成功

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8"?http-equiv="content-type"?content="text/html">
????<title>Title</title>
?<!--[if?lt?IE?7]>
????<style>
????????.ficon{font-family:'fontello'}
????</style>
????<![endif]-->
?<style?type="text/css">
?@font-face?{
????????????font-family:?'fontello';
????????????src:?url('font/fontello.eot');
????????????src:?url('font/fontello.eot#iefix')?format('embedded-opentype'),
????????????url('font/fontello.woff')?format('woff'),
????????????url('font/fontello.ttf')?format('truetype'),
????????????url('font/fontello.svg#fontello')?format('svg');
????????????font-weight:?normal;
????????????font-style:?normal;
????????}
????????.ficon,[class^="ficon-"],[class^="ficon-"]:before,[class*="?ficon-"]:before?{
????????????font-family:?"fontello";
????????????font-size:?15px;
????????????font-style:?normal;
????????????font-weight:?normal;
????????????speak:?none;
????????????display:?inline-block;
????????????text-decoration:?inherit;
????????????width:?1em;
????????????margin-right:?.2em;
????????????text-align:?center;
????????????font-variant:?normal;
????????????text-transform:?none;
????????????line-height:?1em;
????????????margin-left:?.2em;
????????}
????????body{
????????????font:?12px/1.5?tahoma,arial,sans-serif;
????????}
????????ul{
????????????list-style:?none;
????????????display:?block;
????????}
????????ul,li{
????????????margin:?0px;
????????????padding:?0px?0?0?0;
????????}
????????.search-list?li?a{
????????????text-decoration:?none;
????????????color:?#6c6c6c;
????????}
????????.search-list?.select{
????????????background:?#f6f6f6;
????????????display:?block;
????????}
????????.search-list{
????????????position:?absolute;
????????????top:?3px;
????????????left:?3px;
????????????background-color:?white;
????????????width:?71px;
????????????height:?36px;
????????????overflow:?hidden;
????????????border-left:?1px??solid?#f6f6f6;
????????????border-right:?1px?solid?#e5e5e5;
????????}
????????.search-list?li{
????????????display:?none;
????????????height:?35px;
????????????line-height:?35px;
????????????overflow:hidden;
????????????text-align:?center;
????????}
????????.trigger-hover{
????????????height:?auto;
????????}
????????.trigger-hover?li{
????????????display:?block;
????????}
????????.search-container{
????????????position:?relative;
????????}
????????.search-tips{
????????????float:?right;
????????????padding:?3px?15px;
????????}
????????.search-btn{
????????????float:?right;
????????}
????????.search-tips?a{
????????????color:?#333333;
????????????text-decoration:?none;
????????}
????????.btn-search{
????????????background:?url("search.png")?0px?-152px;
????????????width:?120px;
????????????height:?43px;
????????????border:?0px;
????????????cursor:?pointer;
????????}
????????.search-key{
????????????height:?39px;
????????????line-height:?39px;
????????????padding:?2px?0?2px?79px;
????????????overflow:?hidden;
????????????background-color:?orangered;
????????}

????????.search-key?input{
????????????height:?35px;
????????????width:?100%;
????????????border:?0px?none;
????????????outline:?none;
????????????background-color:?#ffffff;
????????}
????????.search-key?i{
????????????position:?absolute;
????????????top:14px;
????????????left:?86px;
????????????z-index:?2;
????????????color:?#333333;
????????}
????????.iconfont{
????????????font-family:?iconfont;
????????????font-size:?12px;
????????????font-style:?italic;
????????}
????</style>
</head>
<body>
????<div?class="search-container">
????????<div?class="search-list"?id="search-tap">
????????????<ul>
????????????????<li?id="tab1"?class="select"><a?href="">寶貝</a></li>
????????????????<li?id="tab2"?class="?"><a?href="">店鋪</a></li>
????????????</ul>
????????</div>
????????<div?class="search-pannel">
????????????<form?action="">
????????????????<div?class="search-tips">
????????????????????<a?href="">
?高級<br>搜索
????????????????????</a>
????????????????</div>
????????????????<div?class="search-btn">
????????????????<button?class="btn-search"?type="submit"></button>
????????????????</div>
????????????????<div?class="search-key">
????????????????????<input?type="text"?x-webkit-speech>
????????????????????<i?class="ficon"?>
?&#xe800;
?</i>
????????????????</div>

????????????</form>
????????</div>
????</div>
????<script>
?var?getDOM=function(id){
?return?document.getElementById(id);
????????}
?var?addHandler=function?(element,type,handler)?{
?var?id=getDOM(element)||document;
?if?(id.addEventListener){
?id.addEventListener(type,handler,false);//這個跟下面on事件相比，優(yōu)勢是元素可以添加多個事件
?}else?if?(id.attachEvent){
?id.attachEvent('on'+type,handler);
????????????}else{
?id['on'+type]=handler;
????????????}
????????}
?addHandler('search-tap','mouseover',function?()?{
?this.className+='?trigger-hover';
????????});
?addHandler('search_tab','mouseout',function(){
?this.className='?search-list';//注意：類名前加空格
?});
?addHandler('tab1','mouseover',function?()?{
?if(this.className.indexOf('select')<0){
?this.className='select';
????????????}
????????});
?addHandler('tab1','mouseout',function?()?{
?this.className="?";
????????});
?addHandler('tab1','click',function?()?{
?getDOM('search-tap').className='search-list';

????????});
?addHandler('tab2','mouseover',function?()?{
?if(this.className.indexOf('select')<0){
?this.className='select';
????????????}
????????});
?addHandler('tab2','mouseout',function?()?{
?this.className="?";
????????});
?addHandler('tab2','click',function?()?{
?getDOM('search-tap').className='search-list';

?getDOM('tab1').className="?";
????????});
?</script>
</body>
</html>