Imitation Taobao TAB changement de champ de recherche changement de recherche compétences content_javascript liées

Un champ de recherche de commutation imitation Taobao TAB, vous pouvez basculer vers le contenu que vous souhaitez rechercher. Les amis intéressés peuvent jeter un œil au code ci-dessous

.

<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>

.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;}

<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>