jquery - 放导航到特定页面时处于活动状态的项目

Question

我正在一个 Asp.Net 网站上工作，在该网站上，我将 Site.Master 中的默认水平导航栏替换为 AdminLTE 示例中可用的导航栏。AdminLTE 示例。

垂直导航栏看起来像这样

导航栏的代码如下

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

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

我尝试使用这个特定的脚本，但它对我不起作用

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

});

不知道我错过了什么。

标签： jqueryhtmlasp.netnavbarmaster-pages

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>元素的 s。

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>