最终效果图如下:
html和JavaScript代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/taobao.css">
</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 action="">
<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" x-webkit-speech="">
<i class="iconfont"></i>
</div>
</form>
</div>
</div>
</body>
<script type="text/javascript">
var getDOM = function(id) {
return document.getElementById(id);
}
var addEvent = function(id, event, fn) {
//这里用一个 ||document,为了防止getDOM为null的时候程序会报错
var el = getDOM(id) || document;
/*
el.addEventListener适用于非IE浏览器,el.attachEvent适用于IE浏览器
*/
if (el.addEventListener) {
el.addEventListener(event, fn, false);
} else if (el.attachEvent) {
el.attachEvent("on"+event,fn);
}
}
var flag = true;
addEvent("search_tab", "mouseover", function() {
if (this.className.indexOf("trigger-hover") < 0) {
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() {
if (flag) {
this.className = " ";
}
flag = true;
})
addEvent("tab_1", "click", function() {
getDOM("search_tab").className = "search-list";
this.className = "selected";
flag = false;
})
addEvent("tab_2", "mouseover", function() {
if (this.className.indexOf("selected") < 0) {
this.className += " selected";
}
})
addEvent("tab_2", "mouseout", function() {
if (flag) {
this.className = " ";
}
flag = true;
})
/*每点击一次,都会出发onmouseout事件,
所以要设计一个标记来表示是否是出发了点击事件,
如果是,那么onmouseout将不会清除样式*/
addEvent("tab_2", "click", function() {
getDOM("search_tab").className = "search-list";
this.className = "selected";
console.log(this.className);
flag = false;
})
</script>
</html>
css代码如下:
* {
padding: 0;
margin: 0;
}
body {
background-color: #333;
}
.bg-div{
background-image: url('../images/river.jpg');
width: 1228px;
height: 690px;
margin: 0 auto;
position: relative;
}
.logo {
background-image: url('../images/logo.png');
width: 107px;
height: 53px;
float: left;
margin: -4px 18px 0 0;
}
form {
float: left;
background-color: #fff;
padding: 5px;
}
.search-input-text {
border: 0;
float: left;
height: 25px;
line-height: 25px;
outline: none;
width: 350px;
font-size: 16px;
}
.search-input-button {
border: 0;
background-image: url('../images/search-button.png');
width: 29px;
height: 29px;
float: left;
}
.search-box {
position: absolute;
top: 200px;
left: 300px;
}
#search-suggest {
width: 388px;
background-color: #fff;
border: 1px solid #999;
display: none;
}
.suggest ul {
list-style: none;
}
.suggest ul li {
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;/*手型*/
}
.suggest ul li:hover {
text-decoration: underline;
background-color: #e5e5e5;
}