下载：　　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. Mac OS环境下媒体文件分割工具mediafilesegmenter的简单使用(生成M3U8 TS文件)

    mediafilesegmenter是苹果开发的一款用于分割媒体文件的工具,其功能与mediastreamsegmenter相似,但操作更简单. * 具体可以对比博客中的另一篇简介<Mac OS ...

  2. [一位菜鸟的COCOS-2D编程之路]精灵表单的制作以及简易动画的生成

    1.第一步:使用Zwoptex 制作精灵表单 2.制作的表单的名称为 cocos2Dpng,cocos2D.plist: 3.精灵的动画效果 主要分为五部分. // on "init&quo ...

  3. Codeforces Round #323 (Div. 2) C. GCD Table 暴力

    C. GCD Table Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/583/problem/C ...

  4. git在windows下clone、pull或者push内存溢出的解决办法

    发现国内使用git来真正管理源码的人不多,特别是大数据量的源码,今天使用git clone android的源码时突然出现remote out of memery,解决办法: git config - ...

  5. 《Java并发编程实战》第十五章 原子变量与非堵塞同步机制 读书笔记

    一.锁的劣势 锁定后假设未释放.再次请求锁时会造成堵塞.多线程调度通常遇到堵塞会进行上下文切换,造成很多其它的开销. 在挂起与恢复线程等过程中存在着非常大的开销,而且通常存在着较长时间的中断. 锁可能 ...

  6. [001]const和指针

    很经典的: const int* p: int* const p: 前者表示指针指向的值是const,指向的值不可变,但是指针本身是可变的:后者表示改指针是const,指针不可变,但是指向的值是可变的 ...

  7. mysql sql语句使用技巧

    mysql更新数据限制limitmysql更新时,要更新记录中某个区间的数据,只能用WHERE条件来限制了,用LIMIT只能限制更新多少条!测试如下:UPDATE products SET goods ...

  8. java_枚举类枚举值

    package ming; enum Gender{ MALE("男"),FEMALE("女"); //public static final Gender M ...

  9. MVC中使用QrCodeNet 生成二维码

    QrCodeNet下载地址:http://qrcodenet.codeplex.com/ using System.Drawing; using System.Drawing.Imaging; usi ...

  10. iOS之设置状态栏颜色

    状态栏的字体为黑色:UIStatusBarStyleDefault 状态栏的字体为白色:UIStatusBarStyleLightContent 一.在info.plist中,将View contro ...