如何简化这个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'); 
     })});