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

最后的切换效果不正常，各位前辈能帮我看看怎么回事吗？

相关代码

.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前面要加空格
   });
   //鼠标移入高亮效果
   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-08-13

源自：搜索框制作 3-7

关注问题我要回答

925

操作

收起

2 回答

carol67351
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><!--字符集图标-->
     </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 =' ';//鼠标滑过时已经将tab_2的className 设置为'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>

以上是我写的代码，在老师代码的基础上js部分做了修改，不足之处还请给出建议