Question

如果您访问此code pen并单击主页上的任意位置，则会循环显示三个框。如果向下滚动，您将看到内容也发生了变化。

我想根据当前显示的方框强调正确的导航栏字。

框2是页面加载时的默认值，然后导航栏应该在id="home"上激活下划线类。然后单击并移动到框3，该框应将下划线类应用于id="blog"。

使用左值循环遍历元素。如何通过查看 left 值来确定哪个框处于活动状态？

$('.box').click(function() {
    $('.box').each(function() {
        if ($(this).offset().left < 0) 
        {
            $(this).css("left", "150%");
        } 
        else if ($(this).offset().left > $('#container').width()) 
        {
            $(this).animate({
                left: '0%',
            }, 500 );
        } 
        else 
        {
            $(this).animate({
                left: '-150%',
            }, 500 );
        }
    });
});

我要申请的课程

.underline-active {
  border-bottom: 2px solid white;
}

到相应的导航栏ID：

#box1 {
    left: -150%;
}

#box2 {
}

#box3 {
    left: 150%;
}

另外，有没有办法让下划线从一个导航项滑动到下一个？

Answer 1

你的导航栏元素可能有点太大了，因为无论何时我向它们添加.underline-active类，它都会延伸到元素的边缘（同时，这可能会使创建css动画更容易他们似乎是这样等距的。）

无论如何，您可以通过其他$().each()电话执行此操作。只需查找具有offset.left == 0的元素即可。 JQuery提供了很多方法来为一个项添加/删除CSS类，所以从那里它只是弄清楚哪个navbar元素获得了我使用switch语句做的.underline-active类。你的新js应该是这样的：

$(document).ready(function() {
  $('#home').addClass('underline-active');
  $('.box').click(function() {
    $('.box').each(function() {
        if ($(this).offset().left < 0) 
        {
            $(this).css("left", "150%");
        } 
        else if ($(this).offset().left > $('#container').width()) 
        {
            $(this).animate({
                left: '0%',
            }, 500 );
        } 
        else 
        {
            $(this).animate({
                left: '-150%',
            }, 500 );
        }
    });
    $('.nav-button').each(function() {
      $(this).removeClass('underline-active');
    });
    $(".box").each(function() {
      if ($(this).offset().left == 0) {
        switch($(this).attr('id')) {
          case 'box1': 
            $('#home').addClass('underline-active'); 
            break;
          case 'box2':
            $('#blog').addClass('underline-active'); 
            break;
          case 'box3':
            $('#about').addClass('underline-active'); 
            break;
       }
      }
    })
  });  
});

如果要为下划线的移动设置动画，则应稍微更改此过程以使用过渡而不是从元素中删除/添加过渡。我想你可以使用滚动页面的相同动画来移动下划线，因为导航栏元素似乎是一致的距离。

如何根据另一个元素左侧的值为元素添加一个类？

1 个答案: