為什么淘寶的tab切換最后都變成空白的了
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>淘寶搜索框</title>
?? ?<link rel="stylesheet" href="css/style.css">
?? ?<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
?? ?<div>
?? ??? ?<div>
?? ??? ??? ?<form action="">
?? ??? ??? ??? ?<div class="search-txt fl">
?? ??? ??? ??? ??? ?<input type="text" x-webkit-speech="">
?? ??? ??? ??? ??? ?<i class="fa fa-search"></i>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div class="search-btn fl">
?? ??? ??? ??? ??? ?<button id="btn" type="submit">搜索</button>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<div class="search-tips fr">
?? ??? ??? ??? ??? ?<a href="#">高級<br>搜索</a>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div></div>
?? ??? ??? ?</form>
?? ??? ??? ?<div?? id="search-tab">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li id="tab-1"><a href="#">寶貝</a></li>
?? ??? ??? ??? ??? ?<li id="tab-2"><a href="#">店鋪</a></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
?? ?<script>
?? ??? ?var getDOM = function(id){
?? ??? ??? ?return document.getElementById(id);
?? ??? ?}
?? ??? ?// var x = getDOM("tab-2").innerHTML;
? //?????? alert(x);
?? ??? ?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";
?? ??? ??? ?// this.style.height = "auto";
?? ??? ?})
?? ??? ?addEvent('tab-1','mouseover',function(){
?? ??? ??? ?if(this.className.indexOf('selected')<0){
?? ??? ??? ??? ?this.className += 'selected';
?? ??? ??? ?}
?? ??? ?})
?? ??? ?addEvent('tab-1','mouseout',function(){
?? ??? ??? ?this.className = '';
?? ??? ?})
?? ??? ?addEvent('tab-1','click',function(){
?? ??? ??? ?// this.className += 'selected';
?? ??? ??? ?getDOM('search-tab').className = 'trigger';
?? ??? ??? ?
?? ??? ?})
?? ??? ?addEvent('tab-2','mouseover',function(){
?? ??? ??? ?if(this.className.indexOf('selected')<0){
?? ??? ??? ??? ?this.className += 'selected';
?? ??? ??? ?}
?? ??? ?})
?? ??? ?addEvent('tab-2','mouseout',function(){
?? ??? ??? ?this.className = '';
?? ??? ?})
?? ??? ?addEvent('tab-2','click',function(){
?? ??? ??? ?// this.className += 'selected';
?? ??? ??? ?getDOM('search-tab').className = 'trigger';
?? ??? ??? ?
?? ??? ?})
?? ?</script>
</body>
</html>
下面是樣式表
@charset "utf-8";
*{
?? ?margin:0;
?? ?padding:0;
?? ?font-size:12px;
?? ?font-family: "宋體" "Helvetic" "Arial";
?? ?box-sizing: border-box;
?? ?box-sizing: border-box;
?? ?-webkit-box-sizing: border-box;
?? ?-moz-box-sizing: border-box;
?? ?-ms-box-sizing: border-box;
?? ?-o-box-sizing: border-box;
}
ul{
?? ?list-style: none;
}
a{
?? ?text-decoration:none;
?? ?color: #8e8e8e;
}
.fl{
?? ?float: left;
}
.fr{
?? ?float:right;
}
.clearfix{
?? ?clear:both;
}
.search-container{
?? ?width:90%;
?? ?margin:100px auto 0;
?? ?position: relative;
}
.search-pannel{
?? ?width:60%;
?? ?margin:0 auto;
?? ?position: relative;
?? ?/*overflow: hidden;*/
}
.search-pannel .search-txt{
?? ?width:80%;
?? ?height: 36px;
?? ?line-height: 36px;
?? ?background-color: #f40;
?? ?padding-left: 10%;
?? ?/*padding:3px 0 3px 79px;*/
?? ?/*overflow: hidden;*/
}
.search-txt input{
?? ?width:100%;
?? ?line-height:30px;
?? ?background-color: #fff;
?? ?border:0;
?? ?outline: 0;
?? ?padding:0 5px;
}
.search-pannel .search-btn{
?? ?width:10%;
}
.search-btn button{
?? ?width:100%;
?? ?height:36px;
?? ?background-color: #f40;
?? ?border:0;
?? ?outline:0;
?? ?color:#fff;
?? ?font:400 1.5em "微軟雅黑";
?? ?letter-spacing: 5px;
?? ?padding-left: 5px;
?? ?cursor:pointer;
}
.search-pannel .search-tips{
?? ?/*padding:5px 0 0 5px;*/
?? ?width: 10%;
?? ?padding-left: 10px;
?? ?line-height: 18px;
}
.search-tips a:hover{
?? ?color:#f40;
}
.search-txt i{
?? ?color:#ccc;
?? ?font-size:12px;
?? ?position: absolute;
?? ?top:35%;
?? ?left:11%;
}
#search-tab{
?? ?width:72px;
?? ?/*height:30px;*/
?? ?border:1px solid #e8e8e8;
?? ?background-color: #fff;
?? ?overflow: hidden;
?? ?position:absolute;
?? ?top:3px;
?? ?left:3px;
}
.trigger{
?? ?height:30px;
}
.trigger-hover{
?? ?height:auto;
?? ?display: block;
}
#search-tab .selected{
?? ?background-color: #f9f9f9;
?? ?display: block;
}
.trigger-hover li{
?? ?display: block;
}
.trigger li{
?? ?display: none;
}
#search-tab li{
?? ?height:30px;
?? ?line-height: 30px;
?? ?text-align: center;
}
