仅适用于一个元素的活动

我正在使用jquery将active添加到我的菜单中。它在索引页上工作,但我现在不能让它在其他页上工作。我试着改变网址以适应确切的位置.pathname,但这似乎不起作用,我也试着删除之前的。任何帮助都将不胜感激。

我的标记:

<nav class="sticky-top navbar navbar-expand-lg navbar-light bg-myColor">
    <a class="navbar-brand" href="#">
      <img src="image/VC-Logo.png" alt="Visionary Creatives logo" height="150px;" />
    </a>
    <button class="navbar-toggler navbar-brand" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navToggle">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/coming-soon.php">Web Design</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/coming-soon.php">Graphic Design</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/coming-soon.php">SEO &amp; Marketing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/coming-soon.php">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/coming-soon.php">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

我的jquery:

$(document).ready(function() {
  $('.navbar-nav .nav-item a[href="' + this.location.pathname + 
'"]').parent().addClass('active');
});

我的网站,如果这也有帮助: http://www.visionary-creatives.com