将<li>项目设置为在导航到特定页面时处于活动状态

Question

我正在Asp.Net网站上工作，在这里我用AdminLTE示例中可用的导航栏替换了Site.Master中的默认水平导航栏。 AdminLTE Example。

垂直导航栏看起来像这样

导航栏的代码如下

<ul class="sidebar-menu" data-widget="tree">
                <li class="header">Navigation</li>
                <!-- Optionally, you can add icons to the links -->
                <li>
                    <a href="Default.aspx">
                        <i class="fa fa-home"></i>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="About.aspx">
                        <i class="fa fa-question"></i>
                        <span>About</span>
                    </a>
                </li>
                <li>
                    <a href="Contact.aspx">
                        <i class="fa fa-address-book"></i>
                        <span>Contact</span>
                    </a>
                </li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#">Link in level 2</a></li>
                        <li><a href="#">Link in level 2</a></li>
                    </ul>
                </li>
            </ul>

我想在用户导航到特定页面后将列表项类别设置为活动。例如，如果用户单击关于链接，它将被重定向到关于页面，然后在该页面上，关于链接的类别应更改为活动

我尝试使用此特定脚本，但不适用于我

$(function() {
 var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
 $("ul li a").each(function(){
      if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
      $(this).addClass("active");
 })

}）;

不知道我在想什么。

Answer 1

您的each函数基于<a>元素的选择器。
因此，您当前正在将类添加到<a>所引用的$(this)元素中。
看来您想将其添加到关联的<li>元素中。

我推荐jQuery的parent()。

  

获取当前匹配元素集中每个元素的父元素，可以选择使用选择器进行过滤。

var test_url = 'localhost:5583/About.aspx';

$(function() {
  var pgurl = test_url.substr(test_url.lastIndexOf("/") + 1);
  $("ul li a").each(function() {
    if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
      $(this).parent().addClass("active");
  })
});

.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
  <li class="header">Navigation</li>
  <!-- Optionally, you can add icons to the links -->
  <li>
    <a href="Default.aspx">
      <i class="fa fa-home"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="About.aspx">
      <i class="fa fa-question"></i>
      <span>About</span>
    </a>
  </li>
  <li>
    <a href="Contact.aspx">
      <i class="fa fa-address-book"></i>
      <span>Contact</span>
    </a>
  </li>
  <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu">
      <li><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul>

---

或者，主要作为演示，您可以将选择器更改为li并测试后代href元素的<a>个。

var test_url = 'localhost:5583/About.aspx';

$(function() {
  var pgurl = test_url.substr(test_url.lastIndexOf("/") + 1);
  $("ul li").each(function() {
    if ($('a', this).attr("href") == pgurl || $('a', this).attr("href") == '')
      $(this).addClass("active");
  })
});

.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu" data-widget="tree">
  <li class="header">Navigation</li>
  <!-- Optionally, you can add icons to the links -->
  <li>
    <a href="Default.aspx">
      <i class="fa fa-home"></i>
      <span>Home</span>
    </a>
  </li>
  <li>
    <a href="About.aspx">
      <i class="fa fa-question"></i>
      <span>About</span>
    </a>
  </li>
  <li>
    <a href="Contact.aspx">
      <i class="fa fa-address-book"></i>
      <span>Contact</span>
    </a>
  </li>
  <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu">
      <li><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul>