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获取form表单值的代码
Jul 17 Javascript
Javascript倒计时代码
Aug 12 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
微信小程序如何使用云开发
May 17 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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分页显示制作详细讲解
2008/11/19 PHP
php生成随机密码的几种方法
2011/01/17 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
js显示时间 js显示最后修改时间
2013/01/02 Javascript
javascript时间函数大全
2014/06/30 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
python爬取拉勾网职位数据的方法
2018/01/24 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Python控制台实现交互式环境执行
2020/06/09 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
奥巴马演讲稿
2014/01/08 职场文书
单位消防安全制度
2014/01/12 职场文书
离婚协议书标准格式
2014/10/04 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
无故旷工检讨书
2015/08/15 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android