Uma caixa de pesquisa de interruptor de guia Taobao de imitação. Alterne para qualquer conteúdo que você deseja pesquisar. Amigos interessados podem verificar o código abaixo.
<div> <div id = "searchbox"> <ul id = "tabbar"> <li tips = "Por favor, digite o nome do produto"> Produto </li> <li> <pan> | </span> </li> <li tips = "por favor, digite o nome da loja" Shop </li> </ul> <div Id "" TABBOX "> <Form <Form OnSubMit =" action = "action =" = "=" TABBOX "> <Form <form") id = "searchform"> <input id = "palavra-chave" name = "palavra-chave" lang = "zh-cn" type = "text" value = "por favor, digite o nome do produto"> <input value = "search" onfocus = "this.blur ()" type = "submit"> </form> </div> <div> <a href = "#"> sapatos href = "#"> Doomwoman </a> <a href = "#"> sapatos masculinos de shenggao </a> <a href = "#"> <span> roupas femininas </a> </a> <a href = "#"> protetor solar </a> <a hre/"#" "> Cream Remoal <a">
.Search {Posição: Absolute; topo: 14px; Esquerda: 34%; Largura: 477px; _width: 477px; Altura: 81px;}. Palavra-chave a {font-size: 12px; altura de linha: 18px; Cor:#999; preenchimento: 0 4px;}. Palavra-chave A span {color: #fb5004;}. Tab-bar li.current {color: #1d7ad9; Peso da fonte: negrito; Antecedentes: URL (../ imagens/trian_up.png) No fundo central de repetição; Botting-Bottom: 9px;}. Tab-Bar Li {Width: 38px; Alinhamento de texto: centro; Cor: #444; flutuar: esquerda; Cursor: Pointer;}. Tab-Bar Li.tab-line {width: 2px; Cor: #C9C9C9; margem: 0 2px;}. Tab-box {borda: 2px Solid #1d7ad9;}. Texto {cor: #a9a9a9; Largura: 376px; Altura: 31px; fronteira: nenhuma; Indente de texto: 10px; flutuar: esquerda; Esboço: Nenhum; borda: 0;}. Botão {largura: 97px; Altura: 32px; Alinhamento de texto: centro; Cor: #ffff; Size da fonte: 18px; Antecedentes: #1d7ad9; fronteira: nenhuma; Float: Esquerda;} <script type = "text/javascript"> $ (function () {// pesquisa alternação $ ('#tabbar'). $ (this) .Attr ('Tips'); if (tips) {$ (this) .addclass ('Current'). Siblings (). RemoveClass ('Current'); $ ('#Keyword'). Val (Tips);}}); </script>