效果体验：http://hovertree.com/texiao/jquery/23/

代码如下,保存到HTML文件也可以查看效果：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

* {

margin: 0;

padding: 0;

list-style: none;

}

.search-hovertree-form {

width: 575px;

margin: 100px auto;

overflow: hidden;

}

.search-hovertree-form .search-bd {

height: 25px;

}

.search-hovertree-form .search-bd li {

font-size: 12px;

width: 60px;

height: 25px;

line-height: 25px;

text-align: center;

float: left;

cursor: pointer;

background-color: #eee;

color: #666;

}

.search-hovertree-form .search-bd li.selected {

color: #fff;

font-weight: 700;

background-color: #B61D1D;

}

.search-hovertree-form .search-hd {

height: 34px;

background-color: #B61D1D;

padding: 3px;

position: relative;

}

.search-hovertree-form .search-hd .search-hovertree-input {

width: 490px;

height: 22px;

line-height: 22px;

padding: 6px 0;

background: none;

text-indent: 10px;

border: 0;

outline: none;

position: relative;

left: 3px;

top: 0;

z-index: 5;

#margin-left:-10px;

}

.search-hovertree-form .search-hd .btn-search {

width: 70px;

height: 34px;

line-height: 34px;

position: absolute;

right: 3px;

top: 3px;

border: 0;

z-index: 6;

cursor: pointer;

font-size: 12px;

color: #fff;

font-weight: 700;

background: none;

outline: none;

}

.search-hovertree-form .search-hd .pholder {

display: inline-block;

padding: 2px 0;

font-size: 12px;

color: #999;

position: absolute;

left: 13px;

top: 11px;

z-index: 4;

background: url(http://hovertree.com/texiao/jquery/23/images/zoom.jpg) no-repeat 0 0;

padding-left: 25px;

top:11px;

}

.search-hovertree-form .search-hd .s2, .search-hovertree-form .search-hd #s2 {

display: none;

}

.search-hovertree-form .search-bg {

width: 495px;

height: 34px;

background-color: #fff;

position: absolute;

left: 3px;

top: 3px;

z-index: 1;

}a{color:blue}

</style><meta charset="UTF-8">

<title> jQuery搜索切换 - 何问起</title><base target="_blank" />

</head>

<body>

<div class="search-hovertree-form">

<div id="search-bd" class="search-bd">

<ul>

<li class="selected">找商品</li>

<li>找商家</li>

</ul>

</div>

<div id="search-hd" class="search-hd">

<div class="search-bg"></div>

<input type="text" id="s1" class="search-hovertree-input">

<input type="text" id="s2" class="search-hovertree-input">

<span class="s1 pholder">食品酒水半价抢疯</span>

<span class="s2 pholder">搜商家名称</span>

<button id="submit" class="btn-search" value="搜索">搜索</button>

</div>

</div>

<div style="text-align:center;clear:both;margin-top:10px">

<a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>

<a href="http://hovertree.com/menu/jquery/">jQuery</a>

<a href="http://hovertree.com/h/bjae/6no8y0fm.htm">原文</a>

<a href="http://hovertree.com/map/">导航</a>

</div>

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

//通用头部搜索切换

$('#search-hd .search-hovertree-input').on('input propertychange',function(){

var val = $(this).val();

if(val.length > 0){

$('#search-hd .pholder').hide(0);

}else{

var index = $('#search-bd li.selected').index();

$('#search-hd .pholder').eq(index).show().siblings('.pholder').hide(0);

}

})

$('#search-bd li').click(function(){

var index = $(this).index();

$('#search-hd .pholder').eq(index).show().siblings('.pholder').hide(0);

$('#search-hd .search-hover'+'tree-input').eq(index).show().siblings('.search-hovertree-input').hide(0);

$(this).addClass('selected').siblings().removeClass('selected');

$('#search-hd .search-hovertree-input').val('');

});

})

</script>

</body>

</html>

更多： http://www.cnblogs.com/jihua/p/webfront.html

jQuery带tab切换搜索框样式代码的更多相关文章

  1. 仿淘宝TAB切换搜索框

    <div class="search"> <div id="searchBox"> <ul class="tab-bar ...

  2. bootstrap搜索框样式代码及效果

    <div class="container"> <div class="input-group"> <input type=&qu ...

  3. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

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

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

  5. easyui easyui-accordion的使用和在tab切换时没有样式

    1.easyui-accordion的使用 <div id="aa" class="easyui-accordion" style="width ...

  6. 好看css搜索框样式_分享8款纯CSS搜索框

    最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...

  7. JQuery实现tab切换

    JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. 第二百一十节，jQuery EasyUI，SearchBox(搜索框)组件

    jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...

  9. react 实现tab切换 三角形筛选样式

    ​ ​ 这次使用的是react的class 类组件 import React, { Component } from 'react' import { LeftOutline, SearchOutli ...

随机推荐

  1. iOS-几大框架的介绍

    1.Objective-C之Foundation框架 概述 我们前面的章节中就一直新建Cocoa Class,那么Cocoa到底是什么,它和我们前面以及后面要讲的内容到底有什么关系呢?Objectiv ...

  2. iOS-App上架流程

    前言:作为一名IOS开发者,把开发出来的App上传到App Store是必须的.下面就来详细介绍下具体流程. 1.打开苹果开发者中心:https://developer.apple.com 打开后点击 ...

  3. Java基础-多线程编程-1.随便选择两个城市作为预选旅游目标。实现两个独立的线程分别显示10次城市名，每次显示后休眠一段随机时间(1000ms以内)，哪个先显示完毕，就决定去哪个城市。分别用Runnable接口和Thread类实现。

    1.随便选择两个城市作为预选旅游目标.实现两个独立的线程分别显示10次城市名,每次显示后休眠一段随机时间(1000ms以内),哪个先显示完毕,就决定去哪个城市.分别用Runnable接口和Thread ...

  4. Css概要与选择器，刻度单位

    目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先 ...

  5. SVN：服务器资源删掉，本地添加时和删掉的名字同名出现One or more files are in a conflicted state.

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html

  6. Web APi之Web Host消息处理管道（六）

    前言 我们知道Web API本身是无法提供请求-响应的机制,它是通过Web Host以及Self Host的寄宿的宿主方式来提供一个请求-响应的运行环境.二者都是将请求和响应抽象成HttpRespon ...

  7. MySQL学习笔记七：存储引擎

    1.MySQL存储引擎的设计采用“插件式”方案,用户可以很方便地选择使用哪种存储引擎,想使用mysql没有提供的引擎时,可以自己安装进去. 查看支持的存储引擎 mysql> show engin ...

  8. OracleDBA之数据库管理

    以下这些东西是我的麦库上存的当时学Oracle的学习笔记今天拿出来和大家分享一下,转载请注明出处,下面用的Oracle的版本是10g,用的时WinServer2003的操作系统,可能有些命令和Orac ...

  9. Android随笔之——PackageManager详解

    参考:http://www.cnblogs.com/xingfuzzhd/p/3374504.html 今天要讲的是PackageManager.Android系统为我们提供了很多服务管理的类,包括A ...

  10. Cesium原理篇：1最长的一帧之渲染调度

    原计划开始着手地形系列,但发现如果想要从逻辑上彻底了解地形相关的细节,那还是需要了解Cesium的数据调度过程,这样才能更好的理解,因此,打算先整体介绍一下Cesium的渲染过程,然后在过渡到其中的两 ...