下载：　　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. jquery-ui 之droppable详解

    <div class="special">drop me</div> <div class="drag-box"> < ...

  2. GridView多行标题行、改造标题行、自定义标题行完美版

    网上找了个找,最终还是自己做的比较靠谱,道理很简单,直接看代码 代码:   /// <summary> /// =================== 两行标题行 ============ ...

  3. mycat表拆分操作教程

    1,迁移数据 举例说明,比如一个博客数据库数据表如下: 这里水平拆分,垂直拆分,只是做个简单的实验,真正的线上业务要根据情况,数据进行拆分. ? 1 2 3 4 5 6 7 8 9 10 11 12 ...

  4. ECshop数据库的访问统计和管理员日志的清空

    ECshop是个不错的系统,但是它有一定漏洞,若是访问量巨大的话,大量的访问统计代码会存入数据库的ecs_stats表中,甚至几天就可以达到几百兆,严重的网站直接就崩溃了.数据备份的时候也有很多不便, ...

  5. window 便笺

    windows的便签很方便人们记录日常工作安排,但是不是所有人都知道如何调用,下面介绍下如何调用windows便签: 1.win + R -->  StikyNot 2.弹出便签界面 3.右击底 ...

  6. Hdu 5001 Walk 概率dp

    Walk Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5001 Desc ...

  7. struts2标签具体解释

    要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部增加下面的代码: <%@taglib prefix="s" uri="/struts ...

  8. 安卓模拟器Android SDK Manager 无法获取SDK列表的解决办法

    1.打开运行Android SDK Manager ,Tool菜单,选择Options,打开设置菜单,勾选“Force https://...sources to be fetched using h ...

  9. 开源PaaS产品介绍

    简介 本文主要介绍一下PaaS领域两个著名的开源软件: Cloud Foundry和OpenShift. [广告]如果你喜欢本博客,请点此查看本博客所有文章:http://www.cnblogs.co ...

  10. Linux性能实时监测工具 Netdata

    http://www.oschina.net/p/netdata?fromerr=hjJMgUjE#rd