Имитационное поле поиска Taobao Tab. Переключитесь на любой контент, который вы хотите найти. Заинтересованные друзья могут проверить код ниже.
<div><div id="searchBox"><ul id="tabBar"><li tips="please enter product name">Product</li><li><span>|</span></li><li tips="please enter store name">Shop</li></ul><div id="tabBox"><form onsubmit="" action="" method="get" name="searchForm" id="searchForm"><input id = "Keyword" name = "Keyword" lang = "zh-cn" type = "text" value = "Пожалуйста, введите имя продукта"> <input value = "search" onfocus = "this.blur ()" type = "prope"> </form> </div> <div> <a href = "#"> Мужская одежда </a> </a> <a href = "#/#"#/"#"#/#" href = "#"> Shenggao Men's Shoes </a> <a href = "#"> <pan> Женская одежда </a> </a> <a href = "#"> Солнцезащитный крем </a> <a href = "#"> Крем для удаления волос </a> </div> </div>
.search {позиция: абсолют; Верх: 14px; Слева: 34%; Ширина: 477px; _width: 477px; Высота: 81px;}. Ключевое слово a {font-size: 12px; высота линии: 18px; Цвет:#999; Padding: 0 4px;}. Ключевое слово a span {color: #fb5004;}. Tab-bar li.current {color: #1d7ad9; шрифт-вес: жирный шрифт; Фон: url (../ Images/trian_up.png) Центральное дно без повторения; Padding-Bottom: 9px;}. Tab-bar li {ширина: 38px; Текст-альбом: Центр; Цвет: #444; Плавание: осталось; Cursor: pointer;}. Tab-bar li.tab-line {width: 2px; Цвет: #C9C9C9; Маржа: 0 2px;}. Tab-box {border: 2px solid #1d7ad9;}. Text {color: #a9a9a9; Ширина: 376px; Высота: 31px; граница: нет; Текст-интент: 10px; Плавание: осталось; Схема: нет; граница: 0;}. Кнопка {ширина: 97px; Высота: 32px; Текст-альбом: Центр; Цвет: #ffff; размер шрифта: 18px; Фон: #1D7AD9; граница: нет; float: слева;} <script type = "text/javascript"> $ (function () {// search toggle $ ('#tabbar'). On ('click', 'li', function () {var tips = $ (this) .attr ('tips'); if (tips) {$ (this) .addclass ('current'). Sibling (). removeClass ('current'); $ ('#Keyword'). Val (tips);}}); </script>