如何修改此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');
});
});