Javascript 引导中的活动导航栏在单击页面标题时保持活动状态

我正在使用引导导航栏，不知道为什么单击href标题时无法选择菜单页面以保持“高亮度”。我的第一个问题是“家”总是“亮”的。下面的脚本解决了这个问题。我现在有两个空标题，当它们被点击时，它们保持“亮”（它们是没有href的死页）。我已经尝试了10多个js脚本，我能找到的最好的是下面的一个，它允许标题在悬停时“点亮”，但在单击时它们不会保持“点亮”。除了上面提到的两个空标题

这是CDN的问题还是我的代码中的漏洞

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});
<nav class="navbar navbar-inverse navbar-fixed-top ">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>  
        </button>

        <a class="navbar-brand" href="home.php">Listalot</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="home.php">Home <span class="sr-only">(current)</span></a></li>
          <li ><a href="table1.php">My Sellers</a></li>
          <li><a href="applicant_card.php">New Customer</a></li>





           <ul class="nav navbar-nav ">

          <li class="dropdown">
          <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" 
            aria-haspopup="true" aria-expanded="false">My Figures <span class="caret"></span></a>
            <ul class="dropdown-menu">

              <li><a href="figures2017.php">2017</a></li>
              <li><a href="figures2016.php">2016</a></li>
              <li><a href="figures2015.php">2015</a></li>
              <li><a href="figures2014.php">2014</a></li>
              <li><a href="figures2013.php">2013</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Compare Years</a></li>
            </ul>
          </li>
        </ul>


 <li><a href="#">Mortgages</a></li>
          <li><a href="#">News Page</a></li>


         <!-- <form class="navbar-form navbar-left">
           <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>   

        </form>   -->
        <ul class="nav navbar-nav navbar-right">



          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
            aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      <!-- /.navbar-collapse -->
    <!-- /.container-fluid -->
  <li><a href="index.php">Log In</a></li>


  <form class="navbar-form navbar-left">
           <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>   

        </form>

  </div>
  </div>
  </nav>

  <div><br></div>
  <br><br>

$（文档）.ready（函数（）{
$（'li.active'）.removeClass（'active'）；
$（'a[href=“”+location.pathname+“]”）。最近（'li'）。addClass（'active'）；
});
切换导航

您应该检查window.location属性，如果它符合所需的链接，则设置活动类

如果

location.pathname

值与

a

元素中的

href

属性的值相同，则代码应该始终执行此操作

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href$="' + location.pathname.match(/[^\\/]+$/)[0] + '"]').closest('li').addClass('active'); 
});

也许只检查路径名的结尾（table1.php，applicator_card.php）就可以了。href属性值以最后一个斜杠后的

/

位置.pathname的最后一部分结尾（根据此答案）

---

我对selctors的了解差不多是。。。这在代码中是什么样子的？thxit成功了，伟大的我会回去看看你现在是怎么做的。thxit现在是2021年，我不知道我在问什么。。。我知道那种感觉，兄弟