下载：　　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. MFRCC522 SPI无法通讯【worldsing笔记】

    用单片机于MRFC522与单片接时,加上485通讯后出现很诡异的像: 只要485芯片上有收到外部发送的信号时RC522就死掉,经过仿真卡在了SPI的收发部分(等待回复) u8 MFRC522Write ...

  2. Modbus调试利器 Modbus Poll

    Modbus Poll是一个非常不错的工具,支持TCP/串口 下载地址:http://pan.baidu.com/share/link?shareid=2880213929&uk=248325 ...

  3. PowerDesigner 12.5 汉化破解完整版

    PowerDesigner 12.5 汉化破解完整版 分类: ⑦ 综合 2011-08-09 14:59 2979人阅读 评论(0) 收藏 举报 破解wizardsybasetoolsshell扩展 ...

  4. Visual Studio动态代码生成的实现基础

    这篇文章讨论以下3个问题: 1.代码生成器应该做什么 2.大多数代码生成器的缺点 3.动态代码生成实现的基础 代码生成器应该做什么? 我认为,目标是加快项目开发,方式是减少重复代码手工操作,实现是用过 ...

  5. ecshop在线手册前言及程序结构

    该在线手册是有模版堂转载而来:仅供参考 一.前言 为什么我们ecshop模板堂要重制ecshop在线手册呢?因为目前网上的一些教程有些是比较老的,有些是不全面的,官方的手册也已经很久没有更 新,很多刚 ...

  6. Clarkson不等式

  7. SQLite使用教程10 运算符

    SQLite 运算符 SQLite 运算符是什么? 运算符是一个保留字或字符,主要用于 SQLite 语句的 WHERE 子句中执行操作,如比较和算术运算. 运算符用于指定 SQLite 语句中的条件 ...

  8. JNI-数据类型

    转载:http://blog.csdn.net/conowen/article/details/7523145 在Java中有两类数据类型:primitive types,如,int, float, ...

  9. 【转】linux中的sed命令

    转自:http://www.cnblogs.com/shineshqw/articles/1978122.html 功能说明: 利用script来处理文本文件. 语 法:sed [-hnV][-e&l ...

  10. linux中文输入法

    rpm方式.在安装盘上已经有各种语言包了.我们仅仅须要找到他们,并安装就能够了. 中文的是 fonts-chinese-3.02-9.6.el5.noarch.rpm fonts-ISO8859-2- ...