Question

我真的很喜欢bootstrap，我试图将活动类应用到菜单中，但由于某种原因无效，我不知道它是否是jquery函数（我得到了它来自教程）或者如果bootstrap不允许使用活动链接。

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的正确答案。

Answer 2

如果您使用twitter-bootstrap 3，可以使用此代码：

<div class="navbar navbar-inverse navbar-static-top">



<div class="container-fluid">


<ul class="nav navbar-nav navbar-left">

                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">CARS</a></li>
                <li><a href="#">MODEL</a></li>
                <li><a href="#">COLORS</a></li>                 

            </ul>           

    </div>


</div>

并在li标签中使用class="active"来显示活动页面

活动链接无法在引导程序上运行

2 个答案: