javascript - 带点滚动的 sidenav

Question

我问了类似的问题，但没有得到答案，所以我会再试一次。我有一个网页。在此页面中，我试图用点制作侧面导航。网页被分成几个部分。我需要做到这一点，以便每次滚动到另一个部分时，该点都会改变颜色。例如:第一部分 - 第一个点是绿色的，其他点是空的。如果我转到第二部分，第二个点会变绿，其他点是空的。 这是 fiddle : https://jsfiddle.net/c1d3tfnL/2/

我的猜测是这部分有问题

for (var i=0; i < aArray.length; i++) {
    var theID = aArray[i];
    console.log(theID);

    if (panel.hasClass('current')) {
      $("a[href='#" + theID + "']").addClass('greens');

  } else {
      $("a[href='#" + theID + "']").removeClass('greens');

  }

但我不确定。它们不是只有一个彩色点，而是全部是绿色的。

您将在页面顶部看到这些点，但由于我有一个内部数据库，所以我无法在此处发布所有内容。它应该看起来像这样:

我已经做了所有事情，包括修复它。这就是现在的样子。

每个圆圈始终是绿色的。这让我抓狂。

Answer 1

问题在于选择部分。您现在要做的就是获取带有 panel 类的所有元素，并尝试查看它是否包含 current 类。拥有 if (panel.hasClass('current')) 将始终返回 true，因为总会有一个具有类 panel 的元素，该元素具有该类，因此所有点都将是绿色的。您需要一个新的选择器来将您的 a 与您的部分相匹配。

<a section-id="hero" href="#hero" class="dot"><span class="hide">dot</span></a>
<a section-id="whole" href="#whole" class="dot"><span class="hide">dot</span></a>
<a section-id="split" href="#split" class="dot"><span class="hide">dot</span></a>
<a section-id="two-split" href="#two-split" class="dot"><span class="hide">dot</span></a>
<a section-id="three-split" href="#three-split" class="dot"><span class="hide">dot</span></a>
<a section-id="footer" href="#footer" class="dot"><span class="hide">dot</span></a>

对于您的 JavaScript 代码，您需要选择具有 section-id 属性的项目，并检查各部分的关联 ID 是否具有类 current

var aChildren = $('.side ul').children();
var aArray = [];
for (var i=0; i < aChildren.length; i++) {
   var aChild = aChildren[i];
   var ahref = $(aChild).attr('section-id');
   aArray.push(ahref);
}

for (var i=0; i < aArray.length; i++) {
   var theID = aArray[i];

   if($('#'+theID).hasClass('current')) {
      $("a[href='#" + theID + "']").addClass('greens');
   } else {
      $("a[href='#" + theID + "']").removeClass('greens');
   }
}