模倣タオバオタブスイッチ検索ボックス。検索するコンテンツに切り替えます。興味のある友達は以下のコードをチェックできます。
<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>