不能实现选中效果。
老师的代码太繁琐了，弄得好混乱，而且不能实现功能。
我精简了下代码，如下所示，但有个问题：不能实现点击后选中项背景颜色变化，求解？
<!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>
