请问一下大家,我挷定事件怎么一个都不能实现啊?
请问一下大家,我挷定事件怎么一个都不能实现啊?
你们的怎么可以啊?
改变背景色 和 切换列表 都不能实现?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>taobao demo</title>
<style type="text/css">
/*应用字符集显示小icon. 小icon的字体文件,一般是个网络文件,也可以百度搜索一下,不同的浏览器会识别不同的字体,要写兼容性,维一的不同就是后缀不同而已.*/
@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("embeddeb-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-image:url(images/%E7%BA%A2%E8%89%B2%E7%AE%AD%E5%A4%B4.png);
width:100px;
height:45px;
border:0;
cursor:pointer;
}
.search-common-panel{height: 39px;background-color: #f50;overflow: hidden;padding: 3px 0 5px 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>
<div id="search_tab">
<ul>
<li id="tab_1">
<a href="">宝贝</a>
</li>
<li id="tab_2">
<a href="">店铺</a>
</li>
</ul>
</div>
<div>
<form action="">
<div>
<a href="">高级<br/>搜索</a>
</div>
<div>
<button type="submit"></button>
</div>
<div>
<input type="text" x-webkit-speech=""/>
<i>O</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 if(el.attachEvent){
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_2','mouseover',function(){
if(this.className.indexof('selected')<0){
this.className+=' selected';
}
});
addEvent('tab_2','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';
});
</script>
</html>
未来991回答
-
习惯受伤
//正确代码如下 addEvent('tab_1','mouseover',function(){ if(this.className.indexOf('selected')<0){ //indexof ==> indexOf this.className+=' selected'; } }); //正确代码如下 addEvent('tab_2','mouseover',function(){ if(this.className.indexOf('selected')<0){ //indexof ==> indexOf this.className+=' selected'; } });
随时随地看视频慕课网APP
相关分类
JavaScript