如何將一個類添加到基於其他元素左值的元素中？

Question

如果您訪問此code pen並單擊主頁上的任意位置，它將循環顯示三個框。如果向下滾動，您也會看到內容更改。

根據當前顯示的框，我想劃下正確的導航欄單詞。

方框2是頁面加載時的默認值，然後導航欄應在id="home"上激活下劃線類。然後，您單擊並移動到方框3，該方框應將下劃線類應用於id="blog"。

它使用左值循環遍歷元素。如何通過查看左側的值來查看哪個框處於活動狀態？

$('.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; 
     } 
     } 
    }) 
    }); 
}); 

如果你想動畫下劃線的運動，那麼你應該稍微改變這個過程，而不是使用轉換移除/從元素添加。我想你可以使用滾動頁面來移動下劃線的相同動畫，因爲導航欄元素看起來是相距一致的距離。