このJQueryコードを簡略化するには

Question

このコードは、私のページの特定のセクタにあるときにnavbarのリンクを強調表示するために、まったく問題なく動作します。

しかし、私はかなりシンプルであり、同じことをするコードを短くしています。 問題は、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' 
    }); 

これが唯一のセクションのですが、私はそれらの6を持っているので、短いことを持っていることは本当にクールになります。

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

あなたが一緒にHTMLのセットアップと期待される結果に応じて、カンマ代わり

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