Javascript 突出显示菜单栏中选定的选项卡<；李>；标签

有人能帮我吗？我有菜单栏：

<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;
}

对于选项卡：平板电脑、软件、手机、相机。这个工作很好。但是对于组件选项卡，具有

的选项卡不起作用。 你能帮我找到解决办法吗

但对于“组件”选项卡，谁没有 工作你能帮我找到解决办法吗

这是因为您选择的是

的
背景色
的直接子体的
.nav
，所以
下拉列表内部的子体
被遗漏了

成功

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

但对于“组件”选项卡，谁没有
工作你能帮我找到解决办法吗

这是因为您选择的是
的
背景色
的直接子体的
.nav
，所以
下拉列表内部的子体
被遗漏了

成功

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


$（函数（）{
var url='1〕http://mysite/mouse“；//window.location.href；
$（“#菜单a”）。每个（函数（）{
//console.log（url+''+this.href）；
如果（url==（this.href））{
$（this.parent（“li”）.addClass（“active”）；
}
});
});
#菜单{
背景色：#8a6d3b；
背景图像：线性渐变（至底部，#bba784，#8a6d3b）；
背景重复：重复-x；
边框颜色：#c7b595#8a6d3b#8e6318；
最小高度：40px；
}
#菜单li.active>a{
背景色：#e0c698；
}

类别














$（函数（）{
var url='1〕http://mysite/mouse“；//window.location.href；
$（“#菜单a”）。每个（函数（）{
//console.log（url+''+this.href）；
如果（url==（this.href））{
$（this.parent（“li”）.addClass（“active”）；
}
});
});
#菜单{
背景色：#8a6d3b；
背景图像：线性渐变（至底部，#bba784，#8a6d3b）；
背景重复：重复-x；
边框颜色：#c7b595#8a6d3b#8e6318；
最小高度：40px；
}
#菜单li.active>a{
背景色：#e0c698；
}

类别













如果您在main
中的任何子列表中应用活动类，则需要从
parents（）
中选择
：最后一个
，以获取主

从更改js代码

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

到

这样，即使url来自子菜单，它也会将
活动类添加到主

下面是演示，
url来自monitor li
，它将活动类添加到
组件


$（文档）.ready（函数（）{
var url='1〕http://mysite/monitor'; 
$（“#菜单a”）。每个（函数（）{
如果（url==（this.href））{
$（this.parents（“li:last”）.addClass（“active”）；
}
});
});
#菜单{
背景色：#8a6d3b；
背景图像：线性渐变（至底部，#bba784，#8a6d3b）；
背景重复：重复-x；
边框颜色：#c7b595#8a6d3b#8e6318；
最小高度：40px；
}
#菜单.nav>li.active>a{
背景色：#e0c698；
}

类别













如果您在main
中的任何子列表中应用活动类，则需要从
parents（）
中选择
：最后一个
，以获取主

从更改js代码

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

到

这样，即使url来自子菜单，它也会将
活动类添加到主

下面是演示，
url来自monitor li
，它将活动类添加到
组件


$（文档）.ready（函数（）{
var url='1〕http://mysite/monitor'; 
$（“#菜单a”）。每个（函数（）{
如果（url==（this.href））{
$（this.parents（“li:last”）.addClass（“active”）；
}
});
});
#菜单{
背景色：#8a6d3b；
背景图像：线性渐变（至底部，#bba784，#8a6d3b）；
背景重复：重复-x；
边框颜色：#c7b595#8a6d3b#8e6318；
最小高度：40px；
}
#菜单.nav>li.active>a{
背景色：#e0c698；
}

类别













您可以简单地使用class=“active”您可以简单地使用class=“active”而不是我想要实现的目标。我需要highlite组件选项卡，只有当从下拉菜单中选择此选项卡中的内容时，才可以使用它。这并不完全是我想要实现的。我需要highlite组件选项卡，只有当从下拉菜单中选择了此选项卡中的某些内容时才可以。Tnak you。工作我有成龙