A copy of Taobao tab switch search box, want to search which aspect of the content to switch to which one, interested friends can look at the following code
<div class= "search" > <div id= "searchbox" > <ul class= "Tab-bar clearfix" Id= "Tabbar" > <li class= "current" tips= "Please enter product name" > Product </li> <li class= "Tab-line" ><span>|< /span></li> <li tips= "Please enter store name" > Shop </li> </ul> <div class= "Tab-box clearfix" id= "Tabbox" > <form onsubmit= "" action= "" method= "Get" name= "Searchform" id= "Searchform" class= "Clearfix" > <input class = "text" id= "keyword" name= "keyword" lang= "ZH-CN" type= "text" value= "Please enter product name > <input class=" button "value=" Search " Onfocus= "This.blur ()" type= "Submit" > </form> </div> </div> <div class= "keyword" > <a href
= "#" ><span> men </span></a> <a href= "#" > Flower shepherd's shoes </a> <a href= "#" > Saint Gao Men's shoes </a> <a href= "#" ><span> Women's </span></a> <a href= "#" > Sun cream </a> <a href= "#" > Hair cream </a > </div> </div>
search{Position:absolute; top:14px; left:34%; width:477px; _width:477px; height:81px
;} . keyword a{font-size:12px line-height:18px; color: #999; padding:0
4px;} . keyword a span{color: #fb5004; tab-bar li.current{color: #1d7ad9; font-weight:bold; Background:url (. /images/trian_up.png) no-repeat Center bottom;
padding-bottom:9px;} . Tab-bar li{width:38px text-align:center; color: #444; float:left; cursor:pointer; Tab-bar li.tab-line{width:2px; Color: #c9c9c9; margin:0
2px;} . tab-box{border:2px solid #1d7ad9; text{color: #a9a9a9; width:376px; height:31px; border:none; text-indent:10px; flo At:left; Outline:none;
border:0;} button{width:97px; height:32px text-align:center; color: #fff; font-size:18px; background: #1d7ad9; border:none; flo
At:left.}
<script type= "Text/javascript" > $ (function () {//Search Toggle $ (' #tabBar '). On (' click ', ' Li ', function () {var tips = $ (this). attr (' tips '); if (tips) {$ (a). addclass (' current '). Siblings (). Removeclass ('
Current ');
$ (' #keyword '). val (tips);
}
}); </script>