效果體驗：http://hovertree.com/texiao/jquery/23/
效果二：http://hovertree.com/texiao/jquery/23/1/
代碼如下：
<!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>