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”。我试过this bit of 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 demo

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

如何在使用页面跳转（单页网站）时更改css class =“current”？

3 个答案:

jsBin demo