請問一個jQuery選項卡怎么寫?。?/h1>

請問大神們一個jQ問題，就是默認(rèn)#tabs下面的所有div都顯示。點擊li.tab1，#tabs里只顯示.tab1,其他隱藏，點擊li.tab2，#tabs里只顯示.tab2,其他隱藏，點擊li.tab3同理。 點擊li.all，全部顯示。同時被點擊的li元素添加一個class，并移除之前被點擊的li元素添加的class。希望大神指點，不勝感激??！

 <div>  
      <ul>  
        <li class="all">全部</li>  
        <li class="tab1">選項卡1</li>  
        <li class="tab2">選項卡2</li>
        <li class="tab3">選項卡3</li> 
      </ul>   
    <div id="tabs">  
        <div class="tab1"></div>  
        <div class="tab1"></div>  
        <div class="tab2"></div>
        <div class="tab3"></div>
        <div class="tab2"></div>
        <div class="tab3"></div>
        <div class="tab3"></div>
    </div>  
</div>

下面的這樣可以，但是我還想要再被點擊的li元素添加一個class，并移除之前被點擊的li元素添加的class，不知道怎么寫，求幫忙多謝啦！

<script type="text/javascript">
$(function(){
    $("ul li").click(function(){
        var cls = $(this).attr("class");
        if(cls=='all'){
            $("#tabs div").css('display','block');
        }else{
            $("#tabs div").each(function(){
                if($(this).hasClass(cls)){
                    $(this).css('display','block');
                }else{
                    $(this).css('display','none');
                }
            });
        }
    });
});
</script>

沒有做測試，自己試試看吧

  $(document).on("click", "ul li", function(event) {
    var name=$(this).attr("class");
    if(name=="all"){
      $("#tabs .div").show()
    }else{
     $("#tabs .div")
        .hide()
        .hasClass(name)
        .show();
    }
     
    });

造的輪子~

<div>  
      <ul id="tab_control">  
        <li class="tab1">選項卡1</li>  
        <li class="tab2">選項卡2</li>
        <li class="tab3">選項卡3</li> 
      </ul>   
    <div id="tabs">  
        <div class="tab1">tab1</div>  
        <div class="tab2">tab2</div>  
        <div class="tab3">tab3</div>
    </div>  
</div>
<script>
$.fn.extend({
    /**
     * tab切換
     * @param  {object} $(this) 需觸發(fā)tab切換的集合
     * @param  {object} param 
     * @param  {object} param.tab_con 切換tab后對應(yīng)的內(nèi)容集合
     * @param  {string} param.tab_cls 切換tab后給當(dāng)前tab添加的樣式
     * @param  {event}  param.callback 切換后執(zhí)行的回調(diào)函數(shù) 參數(shù)1:當(dāng)前tab,參數(shù)2:當(dāng)前內(nèi)容,參數(shù)3:當(dāng)前索引
     * @param  {string} param.trigger 默認(rèn)點擊切換
     */
    tab: function(param){
        var cfg = $.extend({
            tab_con: null,
            tab_cls: 'active',
            callback: null,
            trigger: 'click'
        }, param), tab_ctl = $(this);

        tab_ctl.on(cfg.trigger, function(){
            var index = $(this).index();

            $(this).addClass(cfg.tab_cls).siblings().removeClass(cfg.tab_cls);

            var tab_con = null;// 用于回調(diào)
            if(cfg.tab_con != null){
                cfg.tab_con.hide().eq(index).show();
                tab_con = cfg.tab_con.eq(index);
            }

            if(typeof cfg.callback == 'function'){
                cfg.callback.call(null, $(this), tab_con, index);
            }
        });
    },
    
});
$("#tab_control li").tab({
    tab_con: $("#tabs>div")
});
</script>