壓縮/縮短這個jQuery代碼

Question

請有人可以讓我知道我將如何壓縮/縮短這段代碼？我猜我可以使用孩子或父母的規則，但我不知道從哪裏開始 - 當涉及到JQuery時仍然學習繩索​​！

JQUERY：

$("#index").click(function(){ 
$(".about, .portfolio, .services, .packages, .contact").removeClass('top'); 
}); 

$("#about").click(function(){ 
$(".portfolio, .services, .packages, .contact").removeClass('top'); 
$(".about").delay(500).queue(function(next) { 
    $(this).addClass('top'); 
next(); 
}); 
}); 

$("#portfolio").click(function(){ 
$(".about, .services, .packages, .contact").removeClass('top'); 
$(".portfolio").delay(500).queue(function(next) { 
    $(this).addClass('top'); 
next(); 
}); 
}); 

$("#services").click(function(){ 
$(".about, .portfolio, .packages, .contact").removeClass('top'); 
$(".services").delay(500).queue(function(next) { 
    $(this).addClass('top'); 
next(); 
}); 
}); 

$("#packages").click(function(){ 
$(".about, .portfolio, .services, .contact").removeClass('top'); 
$(".packages").delay(500).queue(function(next) { 
    $(this).addClass('top'); 
next(); 
}); 
}); 

$("#contact").click(function(){ 
$(".about, .portfolio, .services, .packages").removeClass('top'); 
$(".contact").delay(500).queue(function(next) { 
    $(this).addClass('top'); 
next(); 
}); 
}); 

HTML：

<ul> 
<li><a id="index">Home</a></li> 
<li><a id="about">About</a></li> 
<li><a id="portfolio">Portfolio</a></li> 
<li><a id="services">Services</a></li> 
<li><a id="packages">Packages</a></li> 
    </ul> 


<div class="content container"> 

<!-- About --> 
<div class="about container"></div> 

<!-- Portfolio --> 
<div class="portfolio container"></div> 

<!-- Services --> 
<div class="services container"></div> 

<!-- Packages --> 
<div class="packages container"></div> 

<!-- Contact --> 
<div class="contact container"></div> 

</div><!-- .content --> 

任何幫助將非常感激。讓我知道你是否需要更多信息。

Answer 1

您可以使用此：

$('ul li a').click(function(e){ 
    e.preventDefault(); 
    var div = this.id; 
    $('.'+div).siblings('div').removeClass('top'); 
    $("."+div).delay(500).queue(function(next) { 
     $(this).addClass('top'); 
     if(div !== "index") next(); 
    }); 
}); 

Answer 2

您可以嘗試

<ul> 
    <li><a id="index">Home</a></li> 
    <li><a id="about" class="menu">About</a></li> 
    <li><a id="portfolio" class="menu">Portfolio</a></li> 
    <li><a id="services" class="menu">Services</a></li> 
    <li><a id="packages" class="menu">Packages</a></li> 
</ul> 

然後

var $cts = $('.content > .container'); 
$("#index").click(function() { 
    $cts.removeClass('top'); 
}); 
$('.menu').click(function() { 
    var $ct = $('.' + this.id); 
    $cts.not($ct).removeClass('top'); 
    $ct.delay(500).queue(function (next) { 
     $(this).addClass('top'); 
     next(); 
    }); 
})