jQuery实现的类似淘宝网站搜索框样式代码分享
更新时间：2015年08月24日 11:23:20 投稿：lijiao
这篇文章主要介绍了类似淘宝网站搜索框样式实现代码，推荐给大家，有需要的小伙伴可以参考下。
运行效果图： ----------------------查看效果-----------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的类似淘宝网站搜索框样式代码如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝网选项卡类型搜索框样式代码</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(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();
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* searchbox */
.searchbox{width:520px;height:80px;margin:40px auto 0 auto;}
.searchbox ul{ height:35px; width:500px; list-style:none; margin-left:20px}
.searchbox ul li{ float:left}
.searchbox ul li a{ float:left; line-height:35px; padding:0 20px; text-decoration:none; color:#000; font-size:14px; font-weight:bold;}
.searchbox ul li .style1{ background-color:#000; color:#fff}
.searchbox ul li .style2{ background-color:#f00;color:#fff}
.searchbox ul li .style3{ background-color:#F90;color:#fff}
.bodys input{ height:30px;line-height:30px;width:390px;padding:0 10px;float:left;}
.bodys .one{ border:#000 3px solid}
.bodys .two{ border:#f00 3px solid}
.bodys .three{ border:#F90 3px solid}
.bodys .one1{ background-color:#000; }
.bodys .two2{ background-color:#f00;}
.bodys .three3{ background-color:#F90;}
.bodys button{float:left;border:0;height:36px;width:100px; color:#FFF; line-height:36px;text-align:center;overflow:hidden;}
</style>
</head>
<body>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
以上就是为大家分享的jQuery实现的类似淘宝网站搜索框样式代码，希望大家可以喜欢。
相关文章
font-size属性想必大家并不陌生吧，此属性控制字体的大小，在本文将为大家介绍下如何使用jquery获取font-size属性值，感兴趣的朋友可以参考下2013-09-09
本文给大家分享一段jquery代码实现滑动按钮开关的效果，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的的朋友参考下2016-12-12
这篇文章主要介绍通过Jquery如何给基本控件的取值、赋值,需要的朋友可以参考下2014-05-05
下面小编就为大家分享一篇jQuery实现左右滑动的toggle方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
jQuery是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择。其中，jQuery 最令人印象深刻的应用之一就是对图片的处理，它可以让帮助你在你的项目中加入各种精美的图片展示效果2012-08-08
这篇文章主要介绍了Jquery实现纵向横向菜单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了MVC结合jQuery.Ajax异步实现增删改查和分页的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了jQuery实现下拉框功能实例代码的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery 筛选器简单操作,结合实例形式详细分析了jQuery筛选器针对元素、字符串、属性等操作常见技巧与操作注意实行,需要的朋友可以参考下2019-10-10
这篇文章主要向大家推荐了一个jquery无限级联下拉菜单简单实例演示，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论