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

菜單切換不成功

求幫忙，菜單切換時(shí)出現(xiàn)問(wèn)題，菜單切換的li標(biāo)簽在鼠標(biāo)經(jīng)過(guò)時(shí)正常，但卻在鼠標(biāo)移出后不正常顯示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

? ? <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="#">高級(jí)<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>

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

關(guān)注問(wèn)題我要回答

989

操作

收起

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="#">高級(jí)<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);
}
}

//?添加個(gè)變量用于保存當(dāng)前選擇的Tab，這樣當(dāng)鼠標(biāo)離開(kāi)時(shí)，選擇的也是保存的Tab
var?curSelected?=?"tab_1";

//?創(chuàng)建一個(gè)函數(shù)，用于互斥選擇
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>

這樣就可以了，我也看了“搜索框制作”那教程，老師的代碼是有問(wèn)題，自己花了點(diǎn)時(shí)間改了下。

7 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

Kikiy_y 提問(wèn)者

好的，謝謝

2016-09-03 回復(fù) 有任何疑惑可以回復(fù)我~

#2

WindNite

太感謝了，嘗試了很多方法和思路（比如直接交換tab_1和tab_2的值感覺(jué)不是很靠譜）。你這種方法很好，感覺(jué)有比較簡(jiǎn)潔。感謝！

2017-02-12 回復(fù) 有任何疑惑可以回復(fù)我~

celestialSigh
2017-01-17

樓上的貌似還是有點(diǎn)小問(wèn)題，不點(diǎn)擊，只移動(dòng)鼠標(biāo)，貌似會(huì)選中店鋪。我的代碼可以參照樓上用個(gè)函數(shù)簡(jiǎn)化的，懶得搞了

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 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答