javascript - 单击页面标题时， Bootstrap 中的事件导航栏保持事件状态

Question

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

这是 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>

Answer 1

您应该检查 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、applicant_card.php)就可以了。 href 属性值以最后一个 / 斜线之后的 location.pathname 的最后一部分结束(来自此答案 https://stackoverflow.com/a/19292598/4635829 by SmokeyPHP )。

• https://www.w3schools.com/cssref/sel_attr_end.asp
• https://www.w3.org/TR/css3-selectors/#attribute-selectors