javascript - 使用页面跳转（单页网站）时如何更改css class="current"？

Question

早晨，

我一定是在问谷歌所有错误的问题，因为我找不到类似的东西。

我有一个标准的导航列表，但我正在使用页面跳转，因为我想要一个网页。

<ul>
<li><a href="#livestream">Livestream</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#crew">Crew</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

但是我一生都无法弄清楚在使用页面跳转时如何使 class="current" 。我已经尝试过这个 jquery，因为它似乎是我正在寻找的东西，但它什么也没做。我认为它不适用于#links。

有任何想法吗？

Answer 1

如果要将当前类添加到a已单击的类中，可以这样完成：

// Wait for the DOM to be ready
$(function(){
   // Add click-event listener
   $("li a").click(function(){
      // Remove the current class from all a tags
      $("li a").removeClass("current");
      // Add the current class to the clicked a
      $(this).addClass("current");
   });
});

Answer 2

你想把 class=current 放在什么上面？

单击时将其应用于 A 并从所有其他链接中删除的逻辑：

$('a').click(function(){
  //remove from other links, they're no longer current
  $('a').removeClass('current'); 
  //this is now the current active link.
  $(this).addClass('current');
});

这就是你要问的，我相信。如果您有任何问题，请告诉我。

Answer 3

当我们谈论锚点时，您应该.preventDefault()确保不会触发锚点默认操作。

jsBin 演示

$('ul#nav li:eq(0) a').addClass('current');

$('ul li a').on('click',function(e){ // assign 'e' event
  e.preventDefault(); // prevent default anchor action
  
  $('.current').toggleClass();
  $(this).addClass('current');
  
  
  var goToPage = $(this).attr('href'); // get the link href 
  var pagePos = $(goToPage).position().top; 
  $('body').stop().animate({scrollTop: pagePos}, 2000);  
});