请问一个jQuery选项卡怎么写啊？

Question

请问大神们一个jQ问题，就是默认#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>

Answer 1

没有做测试，自己试试看吧

  $(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();
    }
     
    });

Answer 2

造的轮子~

<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) 需触发tab切换的集合
     * @param  {object} param 
     * @param  {object} param.tab_con 切换tab后对应的内容集合
     * @param  {string} param.tab_cls 切换tab后给当前tab添加的样式
     * @param  {event}  param.callback 切换后执行的回调函数 参数1:当前tab,参数2:当前内容,参数3:当前索引
     * @param  {string} param.trigger 默认点击切换
     */
    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;// 用于回调
            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>

Answer 3

下面的这样可以，但是我还想要再被点击的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>