/************* ? html ? ? ************/<div class="search_wrapper">? ? ? ? ? <form>? ? ? ? ? ? <span>?? ? ? ? ? ? ? ? <a href="#" id="search_tab">商品? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<i class="icon_1"></i>? ? ? ? ? ? ? ? </a>? ? ? ? ? ? ? ? <span id="search_list" class="search_tab">? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#" id="search_tab1" class="selected">商品</a>? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#" id="search_tab2">店鋪</a>?? ? ? ? ? ? ? ? </span>? ? ? ? ? </span>?? ? ? ? ? ? <span>? ? ? ? ? ? ? ? ? ? <input type="text" id="search_input" class="search_input" placeholder="請輸入關鍵詞...">? ? ? ? ? ? ? ? ? ? <input type="submit" value="搜索">? ? ? ? ? ? </span>? ? ? ? ? </form></div>/************* ? css ? ?************/.search_wrapper { position:relative; float: right; height: 45px; width: 451px; line-height: 45px; margin-top: 13px; border: 2px solid #7FC7A0; background-color: #474645; background-image:?webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) ? ? ? ? ? ? ? ? ? ? ? ? 20.73%,rgba(71,70,69,1.00) 100%);} background-image:?moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) ????????20.73%,rgba(71,70,69,1.00) 100%);} background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%); background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);}.search_tab {display: none;}.search_tab_show {width: 56px; border: 2px solid #7FC7A0; position:absolute; left: -2px; top:-2px; display: block; ? ? ? ?background-color: #50887F;}.search_input {height:30px; width: 300px;}.search_input_tab_show {margin-left: 54PX; width: 340px;}.selected {background-color: #474645; display: block;? ? ? ? ? ? background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) ? 20.73%,rgba(71,70,69,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%); background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);}/************* ? js ? ?************/// JavaScript Documentvar 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','click',function(){ getDOM('search_list').className ='search_tab_show'; getDOM('search_tab').className ='search_tab'; getDOM('search_input').className+=' search_input_tab_show'; })addEvent('search_tab1','mouseover',function(){ if(this.classsName.indexof('selected')<0){ this.className+=' selected'; }});addEvent('search_tab1','mouseout',function(){ this.className =''; });addEvent('search_tab2','mouseover',function(){ if(this.classsName.indexof('selected')<0){ this.className+=' selected'; }});addEvent('search_tab2','mouseout',function(){ this.className =''; });/************* ? 后面引入jquery實現的效果 ? ?************/我兩個版本都引入過一次。<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>