JQuery Set选项卡为“active”

时间:2015-03-21 20:52:38

标签: javascript jquery tabs

如何修改此jsfiddle以便它:

a)突出显示有效的<li>

b)可以在页面加载时激活选项卡内容(首次加载页面时已打开选项卡)

谢谢!

$(document).ready(function() {
var $panels = $('.panels > .panel');
$('#menu > li').on('click', 'a', function() {
    $panels.filter('.'+this.id).trigger('togglePanel');
});
$panels
    .on('togglePanel', function(){
        var $this           =   $(this)
          , $activePanels   =   $panels.filter(':visible').not($this);
        if ($activePanels.length) {
            $activePanels
                .one('panelHidden', function(){
                    $this.is(':visible')
                    ? $this.trigger('hidePanel')
                    : $this.trigger('showPanel');
                })
                .trigger('hidePanel');
        } else {
            $this.is(':visible')
            ? $this.trigger('hidePanel')
            : $this.trigger('showPanel');
        }
    })
    .on('hidePanel', function(){
        var $this = $(this);
        $this.find('.content').fadeOut(500, function() {
            $this.animate({
                'width': 'hide'
            }, 1000, function(){
                $this.trigger('panelHidden');
            });
        });
    })
    .on('showPanel', function(){
        var $this = $(this);
        $this.animate({
            'width': 'show'
        }, 1000, function() {
            $this.find('.content').fadeIn(500, function(){
                $this.trigger('panelShown');
            });
        });
    });
$panels.find('.content .close').on('click', function() {
    $(this).closest('.panel').trigger('togglePanel');
});

});

0 个答案:

没有答案
相关问题