모방 Taobao 탭 스위치 검색 상자. 검색하려는 콘텐츠로 전환하십시오. 관심있는 친구들은 아래 코드를 확인할 수 있습니다.
<div> <div id = "searchbox"> ul id = "tabbar"> <li tips = "제품 이름을 입력하십시오"> 제품 </li> <li> <span> | </span> </li> <li 팁 = "저장 이름을 입력하십시오"> shop </li> </ul> <div id = "tabbox"> <form onsubmit = ""action "> id = "keyword"name "="keyword "lang ="zh-cn "type ="text "value ="제품 이름을 입력하십시오 "> <입력 값 ="검색 "onfocus ="this.blur () "type ="submit "> </form> </div> <div> <a href ="#"> <span> 남자의 옷 </a> 신발 </a> <a href = "#"> Shenggao 남자 신발 </a> <a href = "#"> <span> 여자 의류 </a> </a> <a href = "#"> 선 스크린 </a> <a href = "#"> 제모 크림 </a> </div>
.Search {위치 : 절대; 상단 : 14px; 왼쪽 : 34%; 너비 : 477px; _width : 477px; 높이 : 81px;}. 키워드 a {font-size : 12px; 라인 높이 : 18px; 색상 :#999; 패딩 : 0 4px;}. 키워드 스팬 {색상 : #fb5004;}. Tab-bar li.current {color : #1d7ad9; 글꼴 중량 : 대담한; 배경 : url (../ images/trian_up.png) 비 반복 중심 하단; Padding-Bottom : 9px;}. Tab-bar li {너비 : 38px; 텍스트 정렬 : 센터; 색상 : #444; 플로트 : 왼쪽; 커서 : 포인터;}. Tab-bar li.tab-line {너비 : 2px; 색상 : #C9C9C9; 여백 : 0 2px;}. Tab-Box {테두리 : 2px solid #1d7ad9;}. text {color : #a9a9a9; 너비 : 376px; 높이 : 31px; 국경 : 없음; 텍스트 안정 : 10px; 플로트 : 왼쪽; 개요 : 없음; 테두리 : 0;}. 버튼 {너비 : 97px; 높이 : 32px; 텍스트 정렬 : 센터; 색상 : #ffff; 글꼴 크기 : 18px; 배경 : #1d7ad9; 국경 : 없음; float : 왼쪽;} <script type = "text/javaScript"> $ (function () {// 검색 토글 $ ( '#tabbar'). on ( 'click', 'li', function () {var tips = $ (this) .attr ( 'tip'); if (tips) {$ (this) .addclass ( 'current'). siblings (). RemoveClass ( 'current'); $ ( '#keyword'). val (tip);}}); </script>