Ein Nachahmungs -Taobao -Registerkarte Switch -Suchfeld. Wechseln Sie zu welchem Inhalt, den Sie suchen möchten. Interessierte Freunde können den folgenden Code überprüfen.
<div> <div id = "SearchBox"> <ul id = "tabbar"> <li tips = "Bitte geben Sie den Produktname ein. id = "Keyword" name = "keyword" Lang = "zh-cn" type = "text" value = "Bitte geben Sie den Produktname ein"> <Eingabewert = "such" onfocus = "this.blur ()" Typ = "Subjekt"> </form> </div> <div> <a href = "#"#"#"#"#"#". href = "#"> shenggao Männerschuhe </a> <a href = "#"> <span> Frauenkleidung </a> </a> <a href = "#"> Sonnenschutz </a> <a href = "#"> Haarentfernungscreme </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.Search {Position: absolut; Top: 14px; Links: 34%; Breite: 477px; _width: 477px; Höhe: 81px;}. Schlüsselwort A {Schriftgröße: 12px; Zeilenhöhe: 18px; Farbe:#999; Padding: 0 4px;}. Schlüsselwort A span {color: #fb5004;}. tab-bar li.current {color: #1d7ad9; Schriftgewicht: fett; Hintergrund: URL (../ Bilder/trian_up.png) No-Repeat Center unten; Padding-Bottom: 9px;}. Tab-Bar li {Breite: 38px; Text-Align: Mitte; Farbe: #444; float: links; Cursor: Zeiger;}. tab-bar li.tab-line {width: 2px; Farbe: #C9C9C9; Rand: 0 2px;}. Tab-Box {Border: 2PX Solid #1D7AD9;}. Text {Farbe: #A9A9A9; Breite: 376px; Höhe: 31px; Grenze: Keine; textindent: 10px; float: links; Umriss: Keine; Rand: 0;}. Button {width: 97px; Höhe: 32px; Text-Align: Mitte; Farbe: #ffff; Schriftgröße: 18px; Hintergrund: #1D7AD9; Grenze: Keine; float: links;} <script type = "text/javaScript"> $ (function () {// Suchen Sie Toggle $ ('#tabbar'). on ('klick', 'li', function () {var tips = $ (this) .Attr ('Tipps'); if (tipps) {$ (this) .AddClass ('aktuell'). Geschwister (). removeclass ('current'); $ ('#keyword'). val (tipps);}});