jQuery仿淘宝搜索框样式代码_Tab切换搜索框

分享一个仿淘宝网选项卡类型搜索框的Demo、使用CSS样式和jQuery代码实现、是一款类似淘宝网站的jQuery搜索框样式、代码非常简单、有类似需求的朋友可以下载看一下、效果还是非常不错的、效果图如下

HTML代码

<div class="searchbox">
	<ul class="border1">
		<li><a href="#" class="style1">宝贝</a></li>
		<li><a href="#">天猫</a></li>
		<li><a href="#">店铺</a></li>
	</ul>
	<div class="bodys">
		<p>
		<input type="text" value="" id="" class="one" placeholder="输入宝贝" />
		<button class="one1">搜索</button>
		</p>
		<p>
		<input type="text" value="" id="" class="two" placeholder="输入宝贝" />
		<button class="two2">搜索</button>
		</p>
		<p>
		<input type="text" value="" id="" class="three" placeholder="输入店铺" />
		<button class="three3">搜索</button>
		</p>
	</div>
</div>	

jQuery代码

$(function(){
	$(".bodys p").not(":first").hide();
	$(".searchbox ul li").mouseover(function(){
		var index = $(this).index();
		if(index==0){
			$(this).find("a").addClass("style1");
			$("li").eq(1).find("a").removeClass("style2");
			$("li").eq(2).find("a").removeClass("style3");
		}
		if(index==1){
			$(this).find("a").addClass("style2");
			$("li").eq(0).find("a").removeClass("style1");
			$("li").eq(2).find("a").removeClass("style3");
		}
		if(index==2){
			$(this).find("a").addClass("style3");
			$("li").eq(0).find("a").removeClass("style1");
			$("li").eq(1).find("a").removeClass("style2");
		}
		var index=$(this).index();
		$(".bodys p").eq(index).show().siblings().hide();
	});
});

最后给贴上源代码的下载链接、希望对大家有用、CSS代码也是比较少的、就在index.html里面

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1oB0Km 密码: 9x5j