最后的切換效果不正常，各位前輩能幫我看看怎么回事嗎？
相關(guān)代碼
.search-list li{
?? ??? ??? ?display: none;
?? ??? ??? ?height: 39px;
?? ??? ??? ?line-height: 39px;
?? ??? ??? ?overflow: hidden;
?? ??? ??? ?text-align: center;/*文字居中*/
?? ??? ?}
?? ??? ?.search-list li a{
?? ??? ??? ?color: #6c6c6c;
?? ??? ?}
?? ??? ?.search-list .selected {
?? ??? ??? ?background:#f6f6f6;/*高亮效果*/
?? ??? ??? ?display: block;
?? ??? ?}
?? ??? ?.trigger-hover{
?? ??? ??? ?height: auto;
?? ??? ?}
?? ??? ?.trigger-hover li{
?? ??? ??? ?display: block;
?? ??? ?}
addEvent('search_tab','mouseover',function(){
?????????????? this.className+=' trigger-hover';//類名trigger-hover前面要加空格
?? ?});
?? ?//鼠標(biāo)移入高亮效果
?? ?addEvent('tab_1','mouseover',function(){
?? ??? ?if(this.className.indexOf('selected')<0){
?? ??? ?????? this.className+=' selected';
?? ??? ?}
?? ?});
?? ?addEvent('tab_1','mouseout',function(){
?? ??? ?this.className='';
?? ?});
?? ?//選中文本替換 1 把列表收起來 2沒選中的隱藏
?? ?addEvent('tab_1','click',function(){
????????????????????????? getDOM('search_tab').className='search-list';?????? ?
?? ?});
?? ?addEvent('tab_2','click',function(){
????????????????????????? getDOM('search_tab').className='search-list';?????? ?
?? ?});
?? ?addEvent('tab_2','mouseover',function(){
?? ??? ?if(this.className.indexOf('selected')<0){
?? ??? ?????? this.className+=' selected';
?? ??? ?}
?? ?});
?? ?addEvent('tab_2','mouseout',function(){
?? ??? ?this.className='';
?? ?});
2016-09-28
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>淘寶搜索框</title> <style> @font-face{font-family:iconfont;src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);} *{ margin:0; padding:0; } body{ font-size:12px/1.5?tahoma,arial,sans-serif; } .search.container{ position:relative; } .search-tips{ float:right; padding:3px?0?0?15px; } .search-tips?a{ text-decoration:none; color:#6c6c6c; } .search-button{ float:right; } .btn-search{ background:url(http://gtmsol.alicdn.com/tps/i/T1qy8Fc8axxc4E9bI-400-300.png); width:100px; height:45px; background-position::0?-200px; border:0; cursor:pointer; background-color:#999; } .search-common-panel{ height:39px; background-color:#f50; overflow:hidden; padding:3px?0?3px?77px; } .search-common-panel?input{ height:39px; line-height:39px; width:100%; border:0?none; outline:0; background-color:#fff; } .search-common-panel?i{ position:absolute; top:14px; left:86px; z-index:2; color:#ccc; } .iconfont{ font-family:iconfont; font-size:12px; font-style:normal; } ul{ display:block; list-style:none; } ul,li{ margin:0; padding::0; } .search-list{ position:absolute; top:3px; left:3px; width:72px; height:39px; overflow:hidden; background:#fff; border-left:1px?solid?#f6f6f6; border-right:1px?solid?#e5e5e5; } .search-list?li{ dispaly:none; height:39px; line-height:39px; overflow:hidden; text-align:center; } .search-list?li?a{ color:#6c6c6c; } .search-list?.selected{ background:#f6f6f6; display:block; } ?.trigger-hover{ height:auto; /* display:block;*/ } ?.trigger-hover?li{ display:block; } </style> </head> <body> <div?class="search-container"> ??<!--切換菜單--> ??<div?class="search-list"?id="search-tab"> ????<ul> ??????<li?id="tab_1"?class="selected">? ?????????<a?href="#">寶貝</a> ??????</li> ??????<li?id="tab_2"?> ?????????<a?href="#">店鋪</a> ??????</li> ????</ul> ??</div> ?<!--整體--> ??<div?class="search-panel"> ???<form> ?????<div?class="search-tips"> ???????<a?href="#"> ?????????高級<br?/>搜索? ???????</a> ?????</div> ????<!--搜索按鈕--> ?????<div?class="search-button"> ???????<button?class="btn-search"?type="submit"></button> ?????</div> ?????<!--輸入框--> ?????<div?class="search-common-panel"> ????????<input?type="text"?x-webkit-speech=""><!--?x-webkit-speech=""為chrome瀏覽器提供的語音輸入功能--> ????????<i?class="iconfont">δ</i><!--字符集圖標(biāo)--> ?????</div> ???</form> ??</div> </div> <script> ?var?getDOM=function(id){ ?return?document.getElementById(id); ?} ?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';//一定要有空格 ?}) ?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_1','click',function(){ ?getDOM('search-tab').className?='search-list'; ?}); 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?='?';//鼠標(biāo)滑過時已經(jīng)將tab_2的className?設(shè)置為'selected'?這里置空。 ?var?a?=getDOM('tab_1').innerHTML; ?getDOM('tab_1').innerHTML=getDOM('tab_2').innerHTML; ?getDOM('tab_2').innerHTML=a; ?getDOM('search-tab').className?='search-list'; ?}); </script> </body> </html>以上是我寫的代碼，在老師代碼的基礎(chǔ)上js部分做了修改，不足之處還請給出建議
2016-08-14
?.trigger-hover{
?????????? ?display: block;
?????????? height: auto;
?? ??? ?}
?? ??? ?.trigger-hover li{
?? ??? ??? ?display: block;
?? ??? ?}
在?.trigger-hover{}里加一個 display: block;就應(yīng)該可以 了