模倣タオバオタブスイッチ検索ボックス。検索するコンテンツに切り替えます。興味のある友達は以下のコードをチェックできます。
<div> <div id = "searchbox"> <ul id = "tabbar"> <li tips = "Product name"> product </li> <li> <span> | </span> </li> <li tips = " id = "keyword" name = "keyword" lang = "zh-cn" type = "text" value = "> <input value =" search "onfocus =" onfocus = "onfocus =" onfocus = "" the.blur（） "submit"> </form> </div> <div> <a href = "＃"> <span men' href = "＃"> shenggao Men's Shoes </a> <a href = "＃"> <span> women's Clothing </a> </a> <a href = "＃"> sunscreen </a> <a href = ">脱毛クリーム</a> </div> </div>
.search {position：absolute;トップ：14px;左：34％。幅：477px; _width：477px;高さ：81px;}。キーワードa {font-size：12px;ラインハイト：18px;色：＃999;パディング：0 4px;}。キーワードspan {color：＃fb5004;}。tab-bar li.current {color：＃1d7ad9; font-weight：bold;背景：url（../ images/trian_up.png）繰り返しセンターボトム。パディングボトム：9px;}。tab-bar li {width：38px;テキストアライグ：センター;色：＃444;フロート：左;カーソル：pointer;}。tab-bar li.tab-line {width：2px;色：＃C9C9C9;マージン：0 2px;}。tab-box {border：2px solid＃1d7ad9;}。テキスト{color：＃a9a9a9;幅：376px;高さ：31px;国境：なし;テキストインデント：10px;フロート：左;アウトライン：なし;境界：0;}。ボタン{width：97px;高さ：32px;テキストアライグ：センター;色：#ffff;フォントサイズ：18px;背景：＃1d7ad9;国境：なし;フロート：左;} <script type = "text/javascript"> $（function（）{// toggle $（ '＃tabbar'） $（this）.attr（ 'tips'）; if（tips）{$（this）.addclass（ 'current'）。siblings（）。removeclass（ 'current'）; $（ '＃keyword'）。val（tips）;}}）; </script>