如何简化此 JQuery 代码答案

【问题标题】：How to simplify this JQuery Code如何简化此 JQuery 代码
【发布时间】：2016-05-30 18:22:35
【问题描述】：

这段代码对我来说完全没问题，当我在页面的某个部分时突出显示导航栏的链接。

但我很确定，有一个更简单/缩短的代码，它也是如此。问题是，我只是将这段代码复制并粘贴在一起，因为我不知道 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'
  });

这只是一个部分，但我有六个，所以如果能再短一点就很酷了。

【问题讨论】：

标签： jquery styles simplify convention

【解决方案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'
  });
});

【讨论】：

或者，根据 HTML 设置和预期结果，他可以直接说 $('.active').removeClass(); $('.selector').addClass();

【解决方案2】：

您可以使用逗号将多个选择器组合在一起

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

【讨论】：