jQuery仿淘宝搜索框样式代码_Tab切换搜索框
2015-05-29 12:45:22 By: shinyuu
分享一个仿淘宝网选项卡类型搜索框的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的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛