javascript - 事件链接在 Bootstrap 上不起作用

Question

我真的是 bootstrap 的新手，我正在尝试将 active 类应用于菜单，但由于某种原因不起作用，我不知道它是否是 jquery 函数(我从教程中得到它) 或者 bootstrap 不允许使用事件链接。

JS Fiddle Demo

HTML

  <div class="masthead">
  <nav id="topNav" role="navigation" aria-label="Top Navigation">
    <ul class="nav nav-justified"> 

      <li><a href="../index.html">Home</a></li>
      <li><a href="../cars.html">Cars</a></li>
      <li><a href="../model.html">Models</a></li>
      <li><a href="../colors.html">Colors</a></li> 
    </ul> 
  </nav> <!-- /Top Navigation -->
  </div> <!-- /masthead -->

CSS

nav-justified a.activee {
    background:red !important;
    }

JS

jQuery(function() {
  jQuery('.nav-justified a').each(function() {
    if (jQuery(this).attr('href')  ===  window.location.pathname) {
      jQuery(this).addClass('activee');
    }
  });
});  

Answer 1

在您的 JavaScript 代码中，您正在检查以确保链接的 href 属性等于 window.location.pathname 但是，在您的 JSFiddle 中，没有的链接具有匹配属性。试试这个:

  <div class="masthead">
  <nav id="topNav" role="navigation" aria-label="Top Navigation">
    <ul class="nav nav-justified"> 

        <li><a href="/021qbcvd/7/show/">Home</a></li>
      <li><a href="../cars.html">Cars</a></li>
      <li><a href="../model.html">Models</a></li>
      <li><a href="../colors.html">Colors</a></li> 
    </ul> 
  </nav> <!-- /Top Navigation -->
  </div> <!-- /masthead -->

http://jsfiddle.net/021qbcvd/7/

请注意，window.location.pathname 等于主 URL 之后的所有内容。我必须执行 alert(window.location.pathname) 才能为 JSFiddle 获取正确的警报。