<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>淘宝搜索框</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font-family: arial,'Hiragino Sans GB',"\5b8b\4f53",sans-serif;
}
#search{
float: left;
height: 31px;
border: 2px solid #f50;
margin: 50px;
}
.search-pannel{
width: 700px;
}
.search-txt{
padding-left: 75px;
float: left;
width: 500px;
height: 30px;
line-height: 30px;
overflow: hidden;
font-size: 14px;
border: none;
outline: 0; //focus时不显示外边框
}
.search-btn{
border: none;
background: #f50;
width: 80px;
height: 32px;
line-height: 30px;
text-align: center;
font-size: 14px;
color: #fff;
cursor: pointer;
float: right;
}
.search-list{
position: absolute;
width: 70px;
height: 29px;
display: block;
line-height: 30px;
text-align: center;
overflow: hidden;
border: 1px solid #ccc;
background: #fff;
}
.search-list li{
cursor: pointer;
font-size: 13px;
color: #666;
height: 31px;
width: 70px;
overflow: hidden;
display: none;
line-height: 32px;
}
.trigger-hover{
height: auto;
}
.trigger-hover li{
display: block;
height: 32px;
}
/*由于.search-list li样式的优先级高于这个样式，所以需要加前缀！*/
.search-list .selected{
background: #f6f6f6;
display: block; /*显示选中元素*/
}
</style>
</head>
<body>
<div id="search">
<div id="search-tab">
<ul>
<li id="li1">宝贝</li>
<li id="li2">店铺</li>
</ul>
</div>
<div>
<form action="">
<input type="text" placeholder="请输入要搜索的词" />
<input type="submit" value="搜索"/>
</form>
</div>
</div>
<script type="text/javascript">
//事件绑定函数
function addEvent(obj,event,fn){
if(obj.addEventListener){
obj.addEventListener(event,fn,false);
}
else if(obj.attachEvent){
obj.attachEvent('on'+event,fn);
}
}
var tab=document.getElementById('search-tab');
addEvent(tab,'mouseover',function(){
this.className+=" trigger-hover";
})
addEvent(tab,'mouseout',function(){
this.className="search-list";
})
var lis=tab.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
addEvent(lis[i],'mouseover',function(){
this.style.background='#f6f6f6';
})
addEvent(lis[i],'mouseout',function(){
this.style.background='#fff';
})
addEvent(lis[i],'click',function(){
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
this.className="selected";
})
}
</script>
</body>
</html>这里是我写的代码点击标签切换成店铺后，再点击显示菜单时，怎么实现“店铺”与“宝贝”两个标签的位置互换？？？求解！！！不甚感激！！！
添加回答
举报
0/150
提交
取消