学会选择

tab切换效果的多选项搜索框-基于jquery

我的美工朋友老是问到这些JS效果，既然帮写了，顺手贴到这里，
红色部分是关键字，如ID，class名称之类!
输入框里那个灰色的提示文字，以前是直接写的value="xxxx",真是衰到家了，今天到淘宝首页瞄了一下，它们用的是两个叠加的层，用到了CSS的绝对定位和相对定位，借鉴了

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
//TAB切换效果
    $("ul[id=sousuo_tab]").find("li").click(function(e){
        $("ul[id=sousuo_tab]").find("li").removeClass("h_bg");                                    
        $(this).addClass("h_bg");
        return false;
     }).eq(0).trigger("click");//页面载入时执行click第1个选项卡

//输入框的提示文字
    $("input[id=sousuo]").focus(
           function(){
               $("#sousuo_label").css("display","none");
     }).blur(
           function(){
               $("#sousuo").val() == "" &&
               $("#sousuo_label").css("display","");
           })
    });
</script>

 
<ul id="sousuo_tab">
          <li class="h_bg"><a href="">网店货源</a></li>
          <li ><a href="">加盟商家</a></li>
          <li><a href="">货源精品</a></li>
          <li><a href="" >网商资讯</a></li>
        </ul>

 
<div style="position:relative;height:24px;width:auto">
                  <label id="sousuo_label" for="sousuo" style="position:absolute;left:10px;top:0;z-index:2;height:24px;line-height:24px;color:#B5B5B5;float:left;width:100%">请输入关键字如：一件代发货</label>
                  <input name="sousuo" id="sousuo" type="text" value="" class="ss_kuang_bg" style="position:absolute;left:0;top:0;color:#333;padding:0;"/>
                </div>

下载显示效果的源代码!