不能實現選中效果。
老師的代碼太繁瑣了，弄得好混亂，而且不能實現功能。
我精簡了下代碼，如下所示，但有個問題：不能實現點擊后選中項背景顏色變化，求解？
<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>淘寶搜索框制作</title>
<style?type="text/css">
@font-face?{font-family:?'iconfont';
????src:?url('iconfont.eot');?/*?IE9*/
????src:?url('iconfont.eot?#iefix')?format('embedded-opentype'),?/*?IE6-IE8?*/
????url('iconfont.woff')?format('woff'),?/*?chrome、firefox?*/
????url('iconfont.ttf')?format('truetype'),?/*?chrome、firefox、opera、Safari,?Android,?iOS?4.2+*/
????url('iconfont.svg#iconfont')?format('svg');?/*?iOS?4.1-?*/
}
*{margin:0;padding:?0;}
body{font:12px/1.5?tohoma,arial,sans-serif;}
.search-container{margin:20px?auto;position:?relative;width:?600px;}
a{text-decoration:?none;}
.search-tips{float:?right;?padding:?3px?0?0?10px;}
.search-tips?a{color:#6c6c6c;}
.search-button{float:?right;}
.btn-search{width:?100px;height:?45px;
background:?#f50;
border:0;cursor:pointer;
font-size:?20px;font-weight:?bold;
padding:?10px;color:white;}
.search-common-panel{height:?39px;background:?#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:?80px;
z-index:?2;
color:grey;
}
.iconfont{?font-family:"iconfont"?!important;
????font-size:16px;font-style:normal;
????-webkit-font-smoothing:?antialiased;
????-webkit-text-stroke-width:?0.2px;
????-moz-osx-font-smoothing:?grayscale;}
????ul{list-style:?none;display:?block;}
????.search-list{
???? position:?absolute;top:?3px;left:3px;?
???? width:?72px;height:?39px;
???? overflow:?hidden;text-align:?center;
???? background:?#fff;border-left:?1px?solid?#ccc;
???? border-right:?1px?solid?#e5e5e5;
????}
????.search-list?li{display:?block;height:?39px;line-height:?39px;
???? overflow:?hidden;cursor:?pointer;}
????.search-list?li?a{color:#6c6c6c;}
????.search-list?li.selected{background:?#f6f6f6;}
????.trigger-hover{height:auto;}
???
</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?type="submit"?class="btn-search">搜 索</button>
</div>
<div?class="search-common-panel">
<input?type="text"?>
<i?class="iconfont"></i>
</div>
</form>
</div>
</div>
<script?type="text/javascript">
???????var?getDom=function(id){
return?document.getElementById(id);
}
var?flag=true;
var?oLi=getDom('search-tab').getElementsByTagName('li');
getDom('search-tab').onmouseover=function(){
for?(var?i?=?0;?i?<?oLi.length;?i++)?{
oLi[i].style.display='block';
}
this.className+='?trigger-hover';
}
for?(var?i?=?0;?i?<?oLi.length;?i++)?{
oLi[i].onmouseover=function(){
if?(this.className.indexOf('selected')<0)?{
this.className+='?selected';
}
}
oLi[i].onmouseout=function(){
this.className='';
}
oLi[i].onclick=function(){
for?(var?i?=?0;?i?<?oLi.length;?i++)?{
oLi[i].style.display='none';
oLi[i].className="";
}
this.style.display='block';
this.className+='?selected';
}
}
</script>
</body>
</html>
2016-06-17
你用的是循環遍歷，會不停地循環檢測onmouseover、onmouseout、onclick，只要onmouseout那么this.className=''取消背景色。而你的onclick中設置oLi[i].style.display='none';當你點擊鼠標以后，所有未被點擊的<li>元素都消失，進而被點擊<li>元素會跳動脫離鼠標，導致觸發onmouseout事件，其實不是沒有變色，只是變色以后瞬間又因為onmouseout事件而背景顏色被取消了。簡而言之，for循環在這里不適用，你永遠得不到你要的結果。