jQuery仿淘宝搜索框样式代码_Tab切换搜索框
2015-05-29 12:45:22  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 11688
• 4

分享一个仿淘宝网选项卡类型搜索框的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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛