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">不起作用。你能帮我找到解决方案吗？

Answer 1

如果您位于主[Angular] There is no directive with "exportAs" set to "ngForm"内的任何子列表中，则需要从WITH sample (id, description) AS ( VALUES (1, 'lorem ipsum'), (2, 'lorem ipsum'), (3, 'lorem ipsum'), (4, 'lorem ipsum') ) SELECT * FROM sample WHERE id = ANY (ARRAY[3,2]) ORDER BY array_position(ARRAY[3,2], id);中选择:last以获取主parents()以应用有效课程。

从

更改您的js代码

<li>

到

<li>

即使网址来自子菜单，它也会将$(this).parent("li").addClass("active");类添加到主$(this).parents("li:last").addClass("active");。

下面是active及其将活动类添加到<li>的演示。

＆＃13;

url is from monitor li

＆＃13;

Components

＆＃13;

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

＆＃13;

Answer 2

但对于没有的组件选项卡工作。你能帮我找到解决方案吗？

这是因为你的选择者正在background-color提供.nav的直接后代，所以dropdown-inner的后代错过了

成功

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

Answer 3

＆＃13;

$(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");
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: