Question

我尝试使用以下javascript来设置活动类

var url = window.location.pathname,
                    urlRegExp = new RegExp(url == '/' ? window.location.origin + '/?$' : url.replace(/\/$/, '')); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
                // now grab every link from the navigation
                $('.page-sidebar a').each(function () {
                    // and test its normalized href against the url pathname regexp
                    if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
                        $(this).addClass('active');
                    }
                });

问题是我需要在父<li>元素上设置它，而不是<a>

我的HTML菜单示例

<div class="page-sidebar nav-collapse collapse">
   <ul>
      <li>
          <div class="sidebar-toggler hidden-phone"></div>
      </li>
      <li class="start"> // HERE I NEED TO ADD CLASS ACTIVE
          <a href="/default.aspx">
          <i class="icon-home"></i>
          <span class="title">Dashboard</span>
          </a>
      </li>
<ul>

Answer 1

使用.closest(）查找与所需选择器匹配的最近祖先/父级。这比使用直接父级更灵活，更安全，因为即使对HTML标记进行了某些类型的更改（例如在目标和父级之间插入了额外的标记层），它仍然可以继续工作。

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

Answer 2

将$(this).addClass('active');更改为$(this).parent().addClass('active');。

Answer 3

将其设置在父级上：

$(this).parent().addClass('active');

Answer 4

使用nearest（）：

$(this).closest('li').addClass('active');

使用jquery设置活动类

4 个答案: