效果体验：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>
