Un cuadro de búsqueda de interruptor de pestaña Taobao de imitación. Cambie al contenido que desee buscar. Los amigos interesados pueden consultar el código a continuación.
<div> <div id = "searchbox"> <ul id = "tabbar"> <li tips = "por favor ingrese el nombre del producto"> producto </li> <li> <span> | </span> </li> <li tips = "por favor ingrese el nombre de la tienda"> shop </li> </ul> <div id = "tabebox"> <formulario ondubMit = "Action =" "Method =" Get "Get" Get "Nombre" Nombre " id = "Keyword" name = "Keyword" lang = "zh-cn" type = "text" value = "por favor ingrese el nombre del producto"> <input value = "search" onFocus = "this.blur ()" type = "enviar"> </form> </div> <div> <a href = "#"> <pan> Zapatos </a> <a href = "#"> SHENGGAO Men's Shoes </a> <a href = "#"> <span> Ropa de mujer </a> </a> <a href = "#"> Sunscreen </a> <a href = "#"> CREA
.Search {posición: absoluto; arriba: 14px; Izquierda: 34%; Ancho: 477px; _Width: 477px; Altura: 81px;}. Palabra clave A {Font-Size: 12px; Línea de altura: 18px; Color:#999; Pading: 0 4px;}. Palabra clave A Span {Color: #FB5004;}. Tab-Bar Li.Current {Color: #1D7AD9; Font-Weight: Bold; Antecedentes: URL (../ Images/trian_up.png) No-repalt Center Bottom; Bottom: 9px;}. Tab-bar li {ancho: 38px; Text-Align: Center; Color: #444; flotante: izquierda; cursor: pointer;}. Tab-bar li.tab-line {ancho: 2px; Color: #C9C9C9; margen: 0 2px;}. tab-box {border: 2px solid #1d7ad9;}. Text {color: #a9a9a9; Ancho: 376px; Altura: 31px; borde: ninguno; Text-Indent: 10px; flotante: izquierda; Esquema: ninguno; border: 0;}. botón {ancho: 97px; Altura: 32px; Text-Align: Center; Color: #ffff; tamaño de fuente: 18px; Antecedentes: #1D7AD9; borde: ninguno; flotante: izquierda;} <script type = "text/javaScript"> $ (function () {// buscar toggle $ ('#tabbar'). on ('click', 'li', function () {var tips = $ (this) .attr ('tips'); if (tips) {$ (this) .addclass ('actual'). siblings (). removeClass ('actual'); $ ('#palabra clave'). val (tips);}}); </script>;