一款仿淘宝TAB切换搜索框,想搜索哪方面的内容就切换到哪一个,感兴趣的朋友可以看看下面的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
< div class = "search" > < div id = "searchBox" > < ul class = "tab-bar clearfix" id = "tabBar" > < li class = "current" tips = "请输入产品名称" >商品</ li > < li class = "tab-line" >< span >|</ span ></ li > < li tips = "请输入店铺名称" >店铺</ li > </ ul > < div class = "tab-box clearfix" id = "tabBox" > < form onsubmit = "" action = "" method = "get" name = "searchForm" id = "searchForm" class = "clearfix" > < input class = "text" id = "keyword" name = "keyword" lang = "zh-CN" type = "text" value = "请输入产品名称" > < input class = "button" value = "搜索" onfocus = "this.blur()" type = "submit" > </ form > </ div > </ div > < div class = "keyword" > < a href = "#" >< span >男装</ span ></ a > < a href = "#" > 朵牧女鞋</ a > < a href = "#" >圣高男鞋</ a > < a href = "#" >< span >女装</ span ></ a > < a href = "#" >防晒霜</ a > < a href = "#" >脱毛膏</ a > </ div > </ div > |
1
2
3
4
5
6
7
8
9
|
.search{ position : absolute ; top : 14px ; left : 34% ; width : 477px ; _width : 477px ; height : 81px ;} .keyword a{ font-size : 12px ; line-height : 18px ; color : #999 ; padding : 0 4px ;} .keyword a span{ color : #fb5004 ;} .tab-bar li.current{ color : #1d7ad9 ; font-weight : bold ; background : url (../images/trian_up.png) no-repeat center bottom ; padding-bottom : 9px ;} .tab-bar li{ width : 38px ; text-align : center ; color : #444 ; float : left ; cursor : pointer ;} .tab-bar li.tab-line{ width : 2px ; color : #c9c9c9 ; margin : 0 2px ;} .tab-box{ border : 2px solid #1d7ad9 ;} .text{ color : #a9a9a9 ; width : 376px ; height : 31px ; border : none ; text-indent : 10px ; float : left ; outline : none ; border : 0 ;} .button{ width : 97px ; height : 32px ; text-align : center ; color : #fff ; font-size : 18px ; background : #1d7ad9 ; border : none ; float : left ;} |
1
2
3
4
5
6
7
8
9
10
11
|
<script type= "text/javascript" > $( function (){ // 搜索切换 $( '#tabBar' ).on( 'click' , 'li' , function (){ var tips = $( this ).attr( 'tips' ); if (tips){ $( this ).addClass( 'current' ).siblings().removeClass( 'current' ); $( '#keyword' ).val(tips); } }); </script> |