为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/搜索框制作

菜单切换不成功

求帮忙，菜单切换时出现问题，菜单切换的li标签在鼠标经过时正常，但却在鼠标移出后不正常显示。


<!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);

}

*{

padding: 0;

margin: 0;

}

.search-{

margin-top: 10px;

}

a{

text-decoration: none;

font-size: 14px;

color: #999;

}

.search-tips{

float: right;

padding: 5px 10px 0 16px;

}

.search-button{

float: right;

}

.btn-search{

background: #F63;

width: 100px;

height: 45px;

color: #FFF;

font-size: 18px;

border: 0;

cursor: pointer;

text-align: center;

line-height: 45px;

}

.search-common-pannel input{

height: 39px;

line-height: 39px;

width: 100%;

border: 0 none;

outline: 0;

background: #FFF;

}

.search-common-pannel{

height: 39px;

background: #F50;

overflow: hidden;

padding: 3px 0 3px 76px;

}

ul{

list-style: none;

display: block;

}

.search-box{

position: absolute;

top: 13px;

left: 2px;

width: 74px;

height: 39px;

overflow: hidden;

background: #FFF;

display: block;

}

.search-box li{

display: none;

height: 39px;

line-height: 39px;

overflow: hidden;

text-align: center;

border: 1px solid #CCC;

border-top: none;

}

.search-box .selected{

background: #e5e5e5;

display: block;

}

.trigger-hover{

height: auto;

}

.trigger-hover li{

display: block;

}


</style>


</head>


<body>

<div class="search-">

<div id="search-tab" class="search-box">

    <ul>

        <li id="tab_1" class="selected">

            <a href="#">宝贝</a>

            </li>

            <li id="tab_2">

            <a href="#">店铺</a>

            </li>

        </ul>

    </div>

    <div class="searchPannel">

    <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-pannel">

            <input type="text" x-webkit-speech="">

            <i></i>

            </div>

        </form>

    </div>

   

</div>

</body>

<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{

el.attachEvent('on'+event, fn);

}

}


addEvent('search-tab', 'mouseover', function(){

if(this.className.indexOf('trigger-hover') < 0){

this.className+= ' trigger-hover';

}

});

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_2', 'click', function(){

getDOM('search-tab').className = 'search-box';

});

addEvent('tab_1', 'click', function(){

getDOM('search-tab').className = 'search-box';

});




</script>


</html>


Kikiy_y

2016-09-01

源自：搜索框制作  3-7

关注问题 我要回答
946
操作
收起

正在回答

3 回答

AzureDrop 回答被采纳 +3 积分
2016-09-03 
<!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);
}
*{
padding: 0;
margin: 0;
}
.search-{
margin-top: 10px;
}
a{
text-decoration: none;
font-size: 14px;
color: #999;
}
.search-tips{
float: right;
padding: 5px 10px 0 16px;
}
.search-button{
float: right;
}
.btn-search{
background: #F63;
width: 100px;
height: 45px;
color: #FFF;
font-size: 18px;
border: 0;
cursor: pointer;
text-align: center;
line-height: 45px;
}
.search-common-pannel input{
height: 39px;
line-height: 39px;
width: 100%;
border: 0 none;
outline: 0;
background: #FFF;
}
.search-common-pannel{
height: 39px;
background: #F50;
overflow: hidden;
padding: 3px 0 3px 76px;
}
ul{
list-style: none;
display: block;
}
.search-box{
position: absolute;
top: 13px;
left: 2px;
width: 74px;
height: 39px;
overflow: hidden;
background: #FFF;
display: block;
}
.search-box li{
display: none;
height: 39px;
line-height: 39px;
overflow: hidden;
text-align: center;
border: 1px solid #CCC;
border-top: none;
}
.search-box .selected{
background: #e5e5e5;
display: block;
}
.trigger-hover{
height: auto;
}
.trigger-hover li{
display: block;
}

</style>

</head>

<body>
<div class="search-">
<div>
    <ul id="search-tab" class="search-box">
        <li id="tab_1" class="selected">
            <a href="#">宝贝</a>
        </li>
        <li id="tab_2">
            <a href="#">店铺</a>
        </li>
        </ul>
    </div>
    <div class="searchPannel">
    <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-pannel">
           	<input type="text" x-webkit-speech="">
            <i></i>
            </div>
        </form>
    </div>
   
</div>
</body>
<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{
el.attachEvent('on'+event, fn);
}
}

// 添加个变量用于保存当前选择的Tab，这样当鼠标离开时，选择的也是保存的Tab
var curSelected = "tab_1";

// 创建一个函数，用于互斥选择
function selectTab(id) {
    if(id == "tab_1"){
        getDOM("tab_2").className = '';
    }
    else{
        getDOM("tab_1").className = '';
    }
    getDOM(id).className = 'selected';
}

addEvent('search-tab', 'mouseover', function(){
    if(this.className.indexOf('trigger-hover') < 0){
        this.className+= ' trigger-hover';
    }
});
addEvent('search-tab', 'mouseout', function(){
    getDOM('search-tab').className = 'search-box';
    selectTab(curSelected);
});

addEvent('tab_1', 'mouseover', function(){
    selectTab('tab_1');
});

addEvent('tab_2', 'mouseover', function(){
    selectTab('tab_2');
});

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

</script>

</html>

这样就可以了，我也看了“搜索框制作”那教程，老师的代码是有问题，自己花了点时间改了下。

7 回复 有任何疑惑可以回复我~
收起回答
#1

Kikiy_y 提问者

好的，谢谢
2016-09-03 回复 有任何疑惑可以回复我~
#2

WindNite

太感谢了，尝试了很多方法和思路（比如直接交换tab_1和tab_2的值感觉不是很靠谱）。你这种方法很好，感觉有比较简洁。感谢！
2017-02-12 回复 有任何疑惑可以回复我~
celestialSigh
2017-01-17

楼上的貌似还是有点小问题，不点击，只移动鼠标，貌似会选中店铺。我的代码可以参照楼上用个函数简化的，懒得搞了

var se='tab_1';
        addEvent('tab_1','click',function(){
         if(getDOM('tab_1').className.indexOf('selected')>=0){
          se='tab_1';
          // getDOM('tab_1').className+='selected';
          getDOM('tab_2').className='';
          getDOM('search-tab').className='search-list';
         }
        })
        addEvent('tab_2','click',function(){
         if(getDOM('tab_2').className.indexOf('selected')>=0){
          // alert('ss');
          se='tab_2';
          // getDOM('tab_2').className+='selected';
          getDOM('tab_1').className='';
          getDOM('search-tab').className='search-list';
         }
        })
       addEvent('search-tab','mouseover',function(){
           this.className+=' trigger-hover'
       })
       addEvent('search-tab','mouseout',function(){
           this.className='search-list'
           getDOM(se).className+=' selected'
       })
       addEvent('tab_1','mouseover',function(){
         if(getDOM('tab_1').className.indexOf('selected')<0){
          getDOM('tab_1').className+=' selected'
         }
       })
       addEvent('tab_1','mouseout',function(){
          getDOM('tab_1').className='';
          getDOM(se).className+=' selected'
       })
       addEvent('tab_2','mouseover',function(){
         if(getDOM('tab_2').className.indexOf('selected')<0){
          getDOM('tab_2').className+=' selected'
         }
       })
       addEvent('tab_2','mouseout',function(){
          getDOM('tab_2').className='';
          getDOM(se).className+=' selected'
       })

0 回复 有任何疑惑可以回复我~
收起回答
Feair
2016-09-21

给楼上一个赞。

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

举报

0/150
提交
取消
搜索框制作
  • 参与学习       66042    人
  • 解答问题       431    个

本课程从简入深讲解搜索框的制作，学习JQ与JS实现Ajax技术的不同点

进入课程

菜单切换不成功

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信