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 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
javaScript基础详解
Jan 19 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
详解Node.JS模块 process
Aug 31 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
ES6下React组件的写法示例代码
2017/05/04 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python中安装easy_install的方法
2018/11/18 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python实现串口自动触发工作的示例
2019/07/02 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
实习鉴定评语
2014/01/19 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL