Question

我正在使用bootstrap导航栏，并想知道为什么我不能选择菜单页以保持高亮=＆＃39;点亮＆＃39;何时单击href标题。我的第一个问题是＆＃39; home＆＃39;总是被点燃了。下面的脚本修复了这个问题。我有2个空标题，当他们被点击时，他们会保持“点亮”状态。（它们是没有href的死页）。我已经尝试了超过10个js脚本，我能找到的最好的是下面的一个允许标题被点亮＆＃39;在悬停但他们不会停留＆＃39;点亮＆＃39;点击。除了上面提到的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值与href元素中的a属性值相同，则您的代码应始终执行此操作。

$(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 SmokeyPHP开始{。}}。

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

1 个答案: