下载：　　http://www.xwcms.net/js/bddm/25368.html

代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>淘宝网选项卡类型搜索框样式代码 - xw素材网</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';">

 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

 </div>

 </body>

 </html>

效果：

【html】【21】高级篇--搜索框的更多相关文章

  1. iOS开发UI篇 -- UISearchBar 属性、方法详解及应用（自定义搜索框样式）

    很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...

  2. iOS开发——UI篇OC篇&TextField作为搜索框的使用

    TextField作为搜索框的使用 在iOS开发中我们经常会使用到搜索框,但是有的时候系统自带的搜索框不足以满足我吗想要的功能,这个时候我们就可以使用自定义的搜索框实现想要的功能. 今天就简单的介绍一 ...

  3. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  4. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

  5. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  6. Flutter学习笔记（21）--TextField文本框组件和Card卡片组件

    如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...

  7. VFP的数据策略：高级篇

    VFP的数据策略:高级篇 引语 在“VFP中的数据策略:基础篇”一文中,我们研究了VFP应用程序中访问非VFP数据(如SQL Server)的不同机制:远程视图.SQL Passthrough.ADO ...

  8. 详细解读Android中的搜索框—— SearchView

    以前总是自己写的 今天看看别人做的 本篇讲的是如何用searchView实现搜索框,其实原理和之前的没啥差别,也算是个复习吧. 一.Manifest.xml 这里我用一个activity进行信息的输入 ...

  9. 三、jQuery--jQuery实践--搜索框制作

    input标签讲解 <input/>作为按钮的type属性:button.submit(后面会有二者对比分析)

随机推荐

  1. C# 产生随机密码

    using System.Web.Security var rawPassword = System.Web.Security.Membership.GeneratePassword(10,1) re ...

  2. [转]windows下srand48()和drand48()的问题

    转自:windows下srand48()和drand48()的问题 #ifndef DRAND48_H #define DRAND48_H #include <stdlib.h> #def ...

  3. IPO

    Initial Public Offerings,简称IPO,首次公开募股(Initial Public Offerings,简称IPO):是指一家企业或公司 [1] (股份有限公司)第一次将它的股份 ...

  4. VS项目重命名工具

    VS项目重命名工具 VS项目整体重命名工具 不再为项目重命名和修改命名空间而烦恼,简单几个字,但是开发加上测试大量项目,前前后后竟然跨越了1个月,汗...不过真正的开发时间可能2-3天的样子.  一. ...

  5. 关系数据库 范式（NF： Normal Form） 说明

    关系数据库 范式(NF: Normal Form) 说明 数据库电话insertdelete存储oracle   目录(?)[+]   一.范式概述(NF:NormalForm) 数据库的设计范式是数 ...

  6. httpClient模拟浏览器发请求

    一.介绍 httpClient是Apache公司的一个子项目, 用来提高高效的.最新的.功能丰富的支持http协议的客户端编程工具包.完成可以模拟浏览器发起请求行为. 二.简单使用例子 : 模拟浏览器 ...

  7. Css基础-介绍及语法

    css 文件后缀.css 基础语法: selector { property:value } 例如: h1 {color:red;font-size:14px;} color:字体颜色  font-s ...

  8. 教你50招提升ASP.NET性能（十二）：在生产环境，仔细考虑你需要记录哪些日志

    (18)When in production, carefully consider what you need to log 招数18: 在生产环境,仔细考虑你需要记录哪些日志 Many peopl ...

  9. 看文章《EAI和SOA的比较》有感(1)

    <EAI和SOA的比较>http://www.cnblogs.com/asdling/archive/2007/11/26/973100.html这篇文章写的很全面,至少自己这么认为,也解 ...

  10. ExtJs5.1.1使用中问题集锦

    1.获取grid filter对象:  grid.getStore().getFilters().items 2.获取grid filter后把filter对象转换成json格式字符串:grid.ge ...