Question

我问了类似的问题，但没有得到答案，所以我会再试一次。我只有一个网页。在此页面中，我试图通过点进行侧面导航。网页分为多个部分。我需要这样做，以便每次我滚动到另一部分时，点都会更改颜色。例如：第一部分-第一个点为绿色，其他为空。比起我去第二节，第二个点变成绿色，其他的都是空的。这是小提琴： 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的 all 元素，并尝试查看它是否包含类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');
   }
}

Answer 2

它的作用是“遍历所有a元素，如果面板具有“ current”类，则为它们着色。您的问题：如果面板具有“当前”类别的颜色，则所有a元素均为绿色你想要什么：如果面板具有当前类的查找，则对应的a元素（属于该面板）并添加绿色。

因此，这不会根据单个面板当前处于活动状态（“当前”）来检查单个a元素是否应获得“绿色”类。

如果您不了解其余的代码，则应该/可以做两件事中的一件；

遍历面板并将“绿色”类添加到相应的a元素。
浏览a元素（就像现在所做的那样），然后检查相应的面板元素（属于a元素的面板元素）。

根据您的代码，这可能很容易：

$panel.find("a").addClass('greens');

----编辑---

尽管已经有一个公认的答案，但是您可以使用更容易理解的JS和HTML（无需循环和全部）来完成此操作。在面板上，您可以添加数据属性，其名称与要变为绿色/活动状态的a元素相对应。使面板处于活动状态时，您还可以选择与面板对应的单个a元素（因此，具有data-corresponding-link =“ hero”的面板是指具有data-id =“ hero”的a元素），并在其中添加绿色类。您可以选择首先选择所有a元素并删除绿色类，或者选择具有绿色类的单个a元素并删除该单个a。

<panel class="hero current" data-corresponding-link="hero"></panel>
<panel class="other-panel" data-corresponding-link="other-panel"></panel>
<a data-id="hero" href="#hero" class="dot"><span class="show">dot</span></a>
<a data-id="other-panel" href="#three-split" class="dot"><span class="hide">dot</span></a>

js：

$(window).scroll(function(){

  var cutoff = $(window).scrollTop();

  panel.each(function(){
    if($(this).offset().top + $(this).height() > cutoff){
      panel.removeClass('current');
      $(this).addClass('current');

      $(".green").removeClass("green") //Select all the green classes and remove the class green (you could scope this further down to a.green or something).
      $("data-id='"+panel.dataset.correspondingLink+"']").addClass("green") //based on the panels corresponding-link data-attribute select the element(s) that have this data-attribute data-id set to "hero" and addClass green
      return false;
    }
  })
}

Answer 3

我不知道您的html外观如何，在这里我给出示例代码，因为它的工作原理与您想要的相同。

编辑：也在滚动条上添加

$("ul li a").click(function(){
   $current=$(this);
  $("ul li").each(function(){
    $(this).removeClass("current");
  })
   $current.parent().addClass("current");
});


 var one_pos=$('#one').offset().top;
 var two_pos=$('#two').offset().top;
 var three_pos=$('#three').offset().top;
 var four_pos=$('#four').offset().top;
 var five_pos=$('#five').offset().top;
 
 $(window).on('scroll', function() {
  
    var current_pos = window.pageYOffset;
    if(current_pos>one_pos && current_pos<two_pos){
        $("ul li a[href='#one']").click();
    }else if(current_pos>two_pos && current_pos<three_pos){
        $("ul li a[href='#two']").click();
    }else if(current_pos>three_pos && current_pos<four_pos){
        $("ul li a[href='#three']").click();
    }else if(current_pos>four_pos && current_pos<five_pos){
        $("ul li a[href='#four']").click();
    }else if(current_pos>four_pos){
        $("ul li a[href='#five']").click();
    }
 
 })

div{
height:200px;
padding:2%;
border:1px solid;
}
ul{
position:fixed;
list-style:none;
}
ul li.current i{
   color:green;
}
ul li i{
   color:#ddd;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<ul>
<li class="current"><a href="#one"><i class="fa fa-circle"></i></a></li>
<li><a href="#two"><i class="fa fa-circle"></i></a></li>
<li><a href="#three"><i class="fa fa-circle"></i></a></li>
<li><a href="#four"><i class="fa fa-circle"></i></a></li>
<li><a href="#five"><i class="fa fa-circle"></i></a></li> 
</ul>

<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<div id="four">four</div>
<div id="five">five</div>


<div>rest</div>

Answer 4

好的，所以经过一些时间和大量的帮助，这是解决方案：

$(window).scroll(function(){

  var cutoff = $(window).scrollTop();

  panel.each(function(){
    if($(this).offset().top + $(this).height() > cutoff){
      panel.removeClass('current');
      $(this).addClass('current');
      return false;
    }
  })

  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');

  }
}

感谢@Mojo Allmighty

带有点的sidenav滚动

4 个答案: