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

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

我這段代碼為什么沒有實現切換效果？并且鼠標滑過第二個li時，第一個li還是處于高亮狀態

<html>

<head>

? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>taobao demo</title>?

<style type="text/css">

@font-face{font-family:iconfont;src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);

src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot?#iefix) format("embedded-opentype"),url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.woff) format("woff"),url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.ttf) format("truetype"),

url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.svg#uxiconfont) format("svg")}

body{font:12px/1.5 tahoma,arial,sans-serif;}

a{text-decoration:none;}

.search-container{position:relative;}

.search-tips{float:right; padding:3px 0 0 15px;}

.search-tips a{color:#6c6c6c;}

.search-button{float:right;}

.btn-search{

background:url(http://gtms01.alicdn.com/tps/i1/T1qyj8Fc8aXXc4E9bI-400-300.png);

width:100px;

height:45px;

background-position:0 -200px;

border:0;

cursor:pointer;

}

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

? ? list-style:none;

? ? display:block;

? ? }

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

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

? ? }

</style>

</head>

<body>

<div class="search-container">

<div id="search_tab" class="search-list">

<ul>

<li id="tab_1" class="selected"><a href="#">寶貝</a></li>

<li id="tab_2"><a href="#">店鋪</a></li>

</ul>

</div>

<div class="search-pannel">

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

? <i class="iconfont">?</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;//為防止獲取不存在的id而報錯

if(el.addEventListener){ //針對非IE瀏覽器的環境

? ? ? ? el.addEventListener(event,fn,false);//false為默認

}else if(el.attachEvent){ //針對IE瀏覽器的環境

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

}

}

addEvent('search_tab','mouseover',function(){

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_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+='';

})



</script>


</html>


正在回答

3 回答

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

這是我的代碼，希望對你有幫助

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

<html>

<head>

? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>taobao demo</title>?

<style type="text/css">

@font-face{font-family:iconfont;src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);

src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot?#iefix) format("embedded-opentype"),url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.woff) format("woff"),url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.ttf) format("truetype"),

url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.svg#uxiconfont) format("svg")}

body{font:12px/1.5 tahoma,arial,sans-serif;}

a{text-decoration:none;}

.search-container{position:relative;}

.search-tips{float:right; padding:3px 0 0 15px;}

.search-tips a{color:#6c6c6c;}

.search-button{float:right;}

.btn-search{

background:url(http://gtms01.alicdn.com/tps/i1/T1qyj8Fc8aXXc4E9bI-400-300.png);

width:100px;

height:45px;

background-position:0 -200px;

border:0;

cursor:pointer;

}

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

? ? list-style:none;

? ? display:block;

? ? }

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

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

? ? }

</style>

</head>

<body>

<div class="search-container">

<div id="search_tab" class="search-list">

<ul>

<li id="tab_1" class="selected"><a href="#">寶貝</a></li>

<li id="tab_2"><a href="#">店鋪</a></li>

</ul>

</div>

<div class="search-pannel">

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

? <i class="iconfont">?</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;//為防止獲取不存在的id而報錯

if(el.addEventListener){ //針對非IE瀏覽器的環境

? ? ? ? el.addEventListener(event,fn,false);//false為默認

}else if(el.attachEvent){ //針對IE瀏覽器的環境

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

}

}

addEvent('search_tab','mouseover',function(){

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_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='';

})



</script>


</html>

我改成這樣了，但是切換的時候，選擇店鋪后，變成空白的，并且就算選擇寶貝，也不能正常的隱藏店鋪，這什么情況

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

慕課此昵稱

解決了嗎？我也是同樣的問題。
2016-08-13 回復 有任何疑惑可以回復我~

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

this.className+='';

})

與

addEvent('tab_2','mouseout',function(){

this.className+='';

})

中的this.className+='';改為this.className='';

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

if(this.className.indexOf('selected')<0){

this.className+='selected';

}

});

與

addEvent('tab_2','mouseover',function(){

if(this.className.indexOf('selected')<0){

this.className+='selected';

}

});

中的this.className+='selected';改為this.className+=' selected';添加空格，要不然成為一個類search-listselected

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

慕妹7683697 提問者

我改成這樣了，但是切換的時候，選擇店鋪后，變成空白的，并且就算選擇寶貝，也不能正常的隱藏店鋪，這什么情況（具體代碼我發在樓下了，能幫忙看下嗎，謝謝了
2016-08-01 回復 有任何疑惑可以回復我~

舉報

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

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

進入課程

我這段代碼為什么沒有實現切換效果？并且鼠標滑過第二個li時，第一個li還是處于高亮狀態

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

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

 幫助反饋 APP下載

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

 公眾號

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