Kotak pencarian sakelar tab taobao tiruan. Beralih ke konten mana pun yang ingin Anda cari. Teman yang tertarik dapat memeriksa kode di bawah ini.
<Div> <Div id = "SearchBox"> <ul id = "tabbar"> <liP = "Harap masukkan nama produk"> Produk </li> <li> <span> | </span> </li> <Li Tips = "Harap masukkan nama toko"> TOKO </li> </ul> "" Get "get" get "get" get "get" get "get" get "get" get "get" get "get" get "get" get "got id = "pencarian"> <input id = "kata kunci" name = "kata kunci" lang = "zh-cn" type = "text" value = "Harap masukkan nama produk"> <input value = "cari" onfocus = "this.blur ()" type = "kirim"> </form> </div> <Div> <Div> <a href = "#"> </forme> </div> <Div> <Div> <a href = "#"> href="#">Doomwoman's Shoes</a><a href="#">Shenggao Men's Shoes</a><a href="#"><span>Women's Clothing</a></a> <a href="#">Sunscreen</a> <a href="#">Hair Removal Cream</a></div></div>
.search {position: absolute; Atas: 14px; Kiri: 34%; Lebar: 477px; _width: 477px; Tinggi: 81px;}. Kata kunci A {font-size: 12px; Line-Height: 18px; Warna:#999; padding: 0 4px;}. Kata kunci A span {color: #fb5004;}. tab-bar li.current {color: #1d7ad9; font-weight: tebal; Latar belakang: url (../ gambar/trian_up.png) no-repeat center bottom; padding-bottom: 9px;}. Tab-Bar li {width: 38px; Teks-Align: tengah; Warna: #444; float: kiri; kursor: pointer;}. tab-bar li.tab-line {width: 2px; Warna: #C9C9C9; margin: 0 2px;}. Tab-box {border: 2px solid #1d7ad9;}. Teks {color: #a9a9a9; Lebar: 376px; Tinggi: 31px; Perbatasan: Tidak Ada; Text-Indent: 10px; float: kiri; Garis Besar: Tidak Ada; BORDER: 0;}. Tombol {Lebar: 97px; Tinggi: 32px; Teks-Align: tengah; Warna: #FFFF; font-size: 18px; Latar Belakang: #1D7AD9; Perbatasan: Tidak Ada; float: kiri;} <script type = "text/javascript"> $ (function () {// cari sakelar $ ('#tabbar'). on ('klik', 'li', function () {var tips = $ (ini) .attr ('tips'); if (tips) {$ (this) .addclass ('saat ini'). SIBLINGS (). RemoveClass ('saat ini'); $ ('#kata kunci'). Val (Tips);}}); </script>