亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

菜單切換不成功

求幫忙，菜單切換時出現問題，菜單切換的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>


正在回答

3 回答

<!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 回復 有任何疑惑可以回復我~

樓上的貌似還是有點小問題，不點擊，只移動鼠標，貌似會選中店鋪。我的代碼可以參照樓上用個函數簡化的，懶得搞了

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

給樓上一個贊。

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

舉報

0/150
提交
取消
搜索框制作
  • 參與學習       66022    人
  • 解答問題       463    個

本課程從簡入深講解搜索框的制作，學習JQ與JS實現Ajax技術的不同點

進入課程

菜單切換不成功

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號