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

我找到老师代码问题了

问题出现在'tab_1','tab_2'的mouseout事件上。当你把这两个事件取消掉，就不会出现选择其中一个元素，在菜单栏出现空白的情况。

咖啡学者

2017-04-13

源自：搜索框制作 3-7

关注问题我要回答

1387

操作

收起

3 回答

Purplefly
2017-04-22

然而你的click事件有问题

0 回复有任何疑惑可以回复我~

收起回答

咖啡学者提问者

什么问题？我测试时候没发现什么不良问题。

2017-04-24 回复有任何疑惑可以回复我~

MHarvay

点击完宝贝的时候，还是会触发mouseover事件，不严谨

2019-01-04 回复有任何疑惑可以回复我~

咖啡学者提问者
2017-04-13

老师的代码有冲突。冲突是在mouseout事件上。因为当选择'tab_2'时候，触发click事件，当你把鼠标移开的时候就触发了mouseout事件。mouseout事件会把'tab_2'的class给取消掉了，所以会出现空白情况。解决办法就是把mouseout事件给去掉。

1 回复有任何疑惑可以回复我~

收起回答

咖啡学者提问者
2017-04-13

<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);
}
};
//展开ul元素选项
addEvent('search_tab','mouseover',function(){
this.className += ' trigger-hover';
});
//光标选项
addEvent('tab_1','mouseover',function(){
if(this.className.indexOf('selected')<0){
this.className += ' selected';
getDOM('tab_2').className='';
}
});
/*addEvent('tab_1','mouseout',function(){
this.className = '';//取消光标选择
});*/
addEvent('tab_2','mouseover',function(){
if(this.className.indexOf('selected')<0){
this.className += ' selected';
getDOM('tab_1').className='';
}
}); 
/*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';
});

1 回复有任何疑惑可以回复我~

收起回答