jQuery实现的类似淘宝网站搜索框样式代码分享


Posted in Javascript onAugust 24, 2015

运行效果图:                                                ----------------------查看效果-----------------------

jQuery实现的类似淘宝网站搜索框样式代码分享

jQuery实现的类似淘宝网站搜索框样式代码分享

jQuery实现的类似淘宝网站搜索框样式代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的类似淘宝网站搜索框样式代码如下

<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实现的类似淘宝网站搜索框样式代码,希望大家可以喜欢。

Javascript 相关文章推荐
javascript this用法小结
Dec 19 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 #Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 #Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 #Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 #Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 #Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 #Javascript
jquery性能优化高级技巧
Aug 24 #Javascript
You might like
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
javascript深入理解js闭包
2010/07/03 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python 实现敏感词过滤的方法
2019/01/21 Python
pow在python中的含义及用法
2019/07/11 Python
python自定义时钟类、定时任务类
2021/02/22 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
花卉与景观设计系大学生求职信
2013/10/01 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
售后服务质量承诺书
2015/04/29 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
征求意见函
2015/06/05 职场文书
同学会感言
2015/07/30 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python