如何簡化這個JQuery代碼

Question

這段代碼完全適合我，突出顯示當我處於頁面的某個扇區時導航欄的鏈接。

但我敢肯定，有一個更簡單/縮短的代碼，它也是這樣。 問題是，我只是複製並粘貼了這段代碼，因爲我不知道JQuery是如何工作的。

任何人都可以給我一個提示如何簡化此代碼？

<!-- START-AREA --> 
    $(function() {      
     $('beginstart').waypoint(function() { 
      $('#sec-start').addClass('active'); 
      $('#sec-info').removeClass('active'); 
      $('#sec-kontakt').removeClass('active'); 
      $('#sec-referenzen').removeClass('active'); 
      $('#sec-angebot').removeClass('active'); 
      $('#sec-impressum').removeClass('active'); 
     })}); 

$('endstart').waypoint(function() { 
     $('#sec-start').addClass('active'); 
     $('#sec-info').removeClass('active'); 
     $('#sec-kontakt').removeClass('active'); 
     $('#sec-referenzen').removeClass('active'); 
     $('#sec-angebot').removeClass('active'); 
     $('#sec-impressum').removeClass('active'); 
    }, { 
     offset: 'bottom-in-view' 
    }); 

這是隻有一個部分，但是我有他們六人，所以這將是非常酷的有短。

Answer 1

Combine the selector by comma separating，也可以在兩種情況下使用相同的功能。

<!-- START-AREA --> 
 
$(function() { 
 
    // define it as a function 
 
    var fun = function() { 
 
    $('#sec-start').addClass('active'); 
 
    $('#sec-info,#sec-kontakt,#sec-referenzen,#sec-angebot,#sec-impressum').removeClass('active'); 
 
    }; 
 
    // use the function reference in both 
 
    $('beginstart').waypoint(fun); 
 
    $('endstart').waypoint(fun, { 
 
    offset: 'bottom-in-view' 
 
    }); 
 
});

Answer 2

可以組多個選擇用逗號

$(function() {      
     $('beginstart').waypoint(function() { 
      $('#sec-start').addClass('active'); 
      $('#sec-info, #sec-kontakt, #sec-referenzen, 
      #sec-angebot, #sec-impressum').removeClass('active'); 
     })});