搜索切换 – 有爱前端

少放了个搜索图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{margin:0;padding:0;list-style:none;} .search-form{width:575px;margin:100px auto;overflow: hidden;} .search-form .search-bd{height: 25px;} .search-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-form .search-bd li.selected{color: #fff;font-weight: 700;background-color: #B61D1D;} .search-form .search-hd{height:34px;background-color: #B61D1D;padding: 3px;position: relative;} .search-form .search-hd .search-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-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-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(images/zoom.jpg) no-repeat 0 0;padding-left:25px;#top:11px;} .search-form .search-hd .s2,.search-form .search-hd #s2{display: none;} .search-form .search-bg{width: 495px;height: 34px;background-color: #fff;position: absolute;left: 3px;top: 3px;z-index: 1;} </style> <title>搜索切换</title> </head> <body>  <div class="search-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-input"> <input type="text" id="s2" class="search-input"> <span class="s1 pholder">食品酒水半价抢疯</span> <span class="s2 pholder">搜商家名称</span> <button id="submit" class="btn-search" value="搜索">搜索</button> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ //通用头部搜索切换 $('#search-hd .search-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-input').eq(index).show().siblings('.search-input').hide(0); $(this).addClass('selected').siblings().removeClass('selected'); $('#search-hd .search-input').val(''); }); }) </script>  </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 搜索切换