Question

情况：我开发了一个简单的导航系统，允许在点击.nav-active时添加.nav-item。网站上的标准活动功能。

预期行为：当用户点击导航链接时，他们会转到该页面，.nav-item'会保留显示当前页面的.nav-active'类。

问题： .nav-active类功能的添加有效，但链接点击不会将用户转到页面，而是保留在当前页面上。

假设：由于我使用的是e.preventDefault();，因此会删除defualt锚定行为，并且不允许用户重定向到该页面。

问题：如何在允许默认锚定行为的同时正确使用活动类功能？我使.click() etc..函数工作的唯一方法是使用e.preventDefault();。是否有更好的方法来处理这个功能？

JS代码：

var $navLink = $('.main-nav .nav-link')
var $navItem = $('.main-nav .nav-item')

$navLink.click(function(e) {
  $navItem.removeClass('nav-active');   

  var $parent = $(this).parent();
  if (!$parent.hasClass('nav-active')) {
    $parent.addClass('nav-active');
  }
  e.preventDefault();
});

Link to full prototype

编辑： 因为删除e.preventDefault();允许添加.nav-active并锚定到jsFiddle上的预期功能，我重新创建了我在构建中看到的确切错误。正如您在Google / Firefox检查器中看到的那样，e.preventDefault();已从函数中删除（位于源：scp-js / csl-scp-script.js第20-22行），它会创建锚点击错误。

See Beta link

Answer 1

尝试以下代码。

$navLink.click(function(e) {
  $navItem.removeClass('nav-active');   
    $(this).parent().addClass('nav-active');
});

添加活动类时允许链接工作

1 个答案: