添加活动课程时允许链接工作

Question

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

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

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

假设：因为我使用的是e.preventDefault();，所以删除了默认的锚点行为并且不允许用户被重定向到页面。

问题：如何在允许默认锚点行为的同时正确利用活动类功能？我让.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 Inspector 中看到的，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');
});