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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
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
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python表示矩阵的方法分析
2017/05/26 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python字符串的index和find的区别详解
2020/06/20 Python
零基础学python应该从哪里入手
2020/08/11 Python
静态成员和非静态成员的区别
2012/05/12 面试题
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
草船借箭教学反思
2014/02/03 职场文书
幼儿教师国培感言
2014/02/19 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
浅析Python中的套接字编程
2021/06/22 Python
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL