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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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
php 使用post,get的一种简洁方式
2010/04/25 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
php将html转为图片的实现方法
2017/05/19 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
初探js和简单隐藏效果的实例
2017/11/23 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
python中reduce()函数的使用方法示例
2017/09/29 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js