下载：　　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. 写一个函数reverseList，该函数能够接受一个List，然后把该List 倒序排列。 例如：  List list = new ArrayList();  list.add(“Hello”);  list.add(“World”);  list.add(“Learn”); //此时list 为Hello World Learn  reverseList

    package homework004; import java.util.ArrayList; import java.util.List; public class Daoxu { public ...

  2. 自己写一个与startWith类似的判断方法

    package com.hanqi.lianxi; import java.util.Scanner; public class startWith {        //自己顶一个与startWit ...

  3. 关于 mysql.test 数据库

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  4. cocos2d-x UserDefault

    转自:http://blog.csdn.net/yanghuiliu/article/details/6912612 正在做项目中有很多游戏数据要保存,常见的玩家数据这些比较简单的可以用CCUserD ...

  5. SAP 库存查询算法

    SAP 的后台有关库存的表,是一种很有意思的表.库存表分两种,一种是当前库存表,另一种是历史库存表.例如有MARD\MCHB\MSPR\MKOL等表,对应的历史库存表就是MARDH\MCHBH\MSP ...

  6. Java基础知识强化之IO流笔记67：Properties的特殊功能使用

    1. Properties的特殊功能 public Object setProperty(String key,String value):添加元素 public String getProperty ...

  7. javascript笔记05：函数表达式和函数语句的区别

    1.首先是函数语句: myfunc(); function myfunc() { //执行一些语句 } 当函数语句被定义的时候,在一个脚本代码被优先考虑,因此,无论该函数是定义之前或者定义之后都可以被 ...

  8. WebDriver: Getting it to play nicely with Xvfb

    http://www.markhneedham.com/blog/2011/12/15/webdriver-getting-it-to-play-nicely-with-xvfb/ Thoughts ...

  9. 分布式 ES 操作流程解析

    概念解析 CURD 操作 CURD 操作都是针对具体的某个或某些文档的操作,每个文档的 routing 都是确认的,所以其所在分片也是可以事先确定的.该过程对应 ES 的 Document API. ...

  10. Oracle 返回结果集的 存储过程

    create or replace PROCEDURE SPGETROLELIST ( P_APPCODE IN VARCHAR2 , P_USERROLE IN VARCHAR2 , CUR_RES ...