在菜单栏 <li> 标记中突出显示所选选项卡

Question

有人可以帮助我吗？我有菜单栏：

<nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs">Categories</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
         <li class="dropdown"><a href="http://mysite/component" class="dropdown-toggle" data-toggle="dropdown">Components</a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
     <ul class="list-unstyled">
          <li><a href="http://mysite/mouse">Mice</a></li>
          <li><a href="http://mysite/monitor">Monitors</a></li>
          <li><a href="http://mysite/printer">Printers</a></li>
    </ul>
</div>
              <a href="http://mysite/component" class="see-all">Show All Components</a> </div>
        </li>

<li><a href="http://mysite/tablet">Tablets</a></li>
<li><a href="http://mysite/software">Software</a></li>
<li><a href="http://mysite/smartphone">Phones</a></li>
<li><a href="http://mysite/camera">Cameras</a></li>
     </ul>
    </div>
</nav>

此菜单栏的样式表：

#menu {
    background-color: #8a6d3b;
    background-image: linear-gradient(to bottom, #bba784, #8a6d3b);
    background-repeat: repeat-x;
    border-color: #c7b595 #8a6d3b #8e6318;
    min-height: 40px;
}

我需要在此菜单栏中突出显示选定的选项卡（组件、平板电脑、软件、手机、相机）。为此，我尝试使用这个脚本：

$(function(){

    var url = window.location.href; 

    $("#menu a").each(function() {
         if(url == (this.href)) { 
            $(this).parent("li").addClass("active");
        }
    });
});

这种风格：

#menu .nav > li.active > a  {
    background-color: #e0c698;
}

对于选项卡：平板电脑、软件、手机、相机。这个工作正常。但是对于具有 <div class="dropdown-inner"> 的 Components 选项卡不起作用。你能帮我找到解决办法吗？

Answer 1

But for Components tab who has does not work. Can you help me to find solution?

这是因为您选择器给出 background-color of direct descendants of .nav, so descendants of dropdown-inner 被遗漏.

成功

#menu .nav li.active > a  { //removed > after .nav
    background-color: #e0c698;
}

Answer 2

$(function() {

  var url = 'http://mysite/mouse'; //window.location.href;

  $("#menu a").each(function() {
    //console.log(url + ' ' + this.href);
    
    if (url == (this.href)) {
      $(this).parent("li").addClass("active");
    }
  });
});

#menu {
  background-color: #8a6d3b;
  background-image: linear-gradient(to bottom, #bba784, #8a6d3b);
  background-repeat: repeat-x;
  border-color: #c7b595 #8a6d3b #8e6318;
  min-height: 40px;
}

#menu li.active > a {
  background-color: #e0c698;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="navbar">
  <div class="navbar-header"><span id="category" class="visible-xs">Categories</span>
    <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
  </div>
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="http://mysite/component" class="dropdown-toggle" data-toggle="dropdown">Components</a>
        <div class="dropdown-menu">
          <div class="dropdown-inner">
            <ul class="list-unstyled">
              <li><a href="http://mysite/mouse">Mice</a></li>
              <li><a href="http://mysite/monitor">Monitors</a></li>
              <li><a href="http://mysite/printer">Printers</a></li>
            </ul>
          </div>
          <a href="http://mysite/component" class="see-all">Show All Components</a> </div>
      </li>

      <li><a href="http://mysite/tablet">Tablets</a></li>
      <li><a href="http://mysite/software">Software</a></li>
      <li><a href="http://mysite/smartphone">Phones</a></li>
      <li><a href="http://mysite/camera">Cameras</a></li>
    </ul>
  </div>
</nav>

Answer 3

如果您在主 <li> 中的任何子列表中，您需要 select 来自 parents() 的 :last 以获得主 <li>应用活动 class.

更改您的 js 代码

$(this).parent("li").addClass("active");

到

$(this).parents("li:last").addClass("active");

即使 url 来自子菜单，它也会将 active class 添加到主菜单 <li>。

下面是演示，其中 url is from monitor li 及其添加活动 class 到 Components。

$(document).ready(function() {
  var url = 'http://mysite/monitor'; 
    $("#menu a").each(function() {
         if(url == (this.href)) { 
            $(this).parents("li:last").addClass("active");
        }
    });
});

#menu {
  background-color: #8a6d3b;
  background-image: linear-gradient(to bottom, #bba784, #8a6d3b);
  background-repeat: repeat-x;
  border-color: #c7b595 #8a6d3b #8e6318;
  min-height: 40px;
}

#menu .nav > li.active > a {
  background-color: #e0c698;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="navbar">
  <div class="navbar-header"><span id="category" class="visible-xs">Categories</span>
    <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
  </div>
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown"><a href="http://mysite/component" class="dropdown-toggle" data-toggle="dropdown">Components</a>
        <div class="dropdown-menu">
          <div class="dropdown-inner">
            <ul class="list-unstyled">
              <li><a href="http://mysite/mouse">Mice</a></li>
              <li><a href="http://mysite/monitor">Monitors</a></li>
              <li><a href="http://mysite/printer">Printers</a></li>
            </ul>
          </div>
          <a href="http://mysite/component" class="see-all">Show All Components</a> </div>
      </li>

      <li><a href="http://mysite/tablet">Tablets</a></li>
      <li><a href="http://mysite/software">Software</a></li>
      <li><a href="http://mysite/smartphone">Phones</a></li>
      <li><a href="http://mysite/camera">Cameras</a></li>
    </ul>
  </div>
</nav>

在菜单栏 <li> 标记中突出显示所选选项卡

Highlight selected tab in menu bar <li> tag

html

javascript

css

jquery

nav