使用 jQuery 设置活动菜单项当前 URL

Question

我正在尝试将活动类添加到当前菜单项。到目前为止，我的 HTML 如下所示：

<ul id="navmenu" class="navigation">
<li >
    <a href="#"> Home</a>
</li>
<li class="sub_navmenu">
    <a href="#">About me</a>
    <ul>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li>
            <a href="#">Item 1</a>
        </li>
    </ul>
    </li>
  <ul>

最好在项目 1 和父 li 元素（即 sub_navmenu）上启用活动类。 我的 jQuery 是这样的：

$(function () {
setNavigacija();
   });

  function setNavigacija() {
  var path = window.location.pathname;
  path = path.replace(/\/$/, "");
   path = decodeURIComponent(path);

  $("#navmenu li a").each(function () {
    var href = $(this).attr('href');
    if (path.substring(0, href.length) === href) {
        $(this).closest('li').addClass('active');
    }
   });
 }

小提琴链接https://jsfiddle.net/41uLs8md/12/

Answer 1

您的if (path.substring(0, href.length) === href) { 似乎有问题

你可以试试这个链接。

$(function () {
    setNavigacija();
});

function setNavigacija() {
    var path = window.location.href;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);
    $("#navmenu li a").each(function () {
        var href = $(this).attr('href');
        if (path.indexOf(href) != -1) {
            $(this).closest('li').addClass('active');
        }
    });
}

Answer 2

$(function () {
    setNavigacija();
});

function setNavigacija() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);
 //$(".sub_navmenu ul li a").addClass('active');
    $("#navmenu li a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
     $(".sub_navmenu ul li").click(function(){
          $(this).find('a').toggleClass('active');
     });
}

.navigation {
  list-style-type: none;
  
}
.sub_navmenu > ul {
   list-style-type: none;
}
.active {
  
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="navmenu" class="navigation">
    <li >
        <a href="#"> Home</a>
    </li>
    <li class="sub_navmenu">
        <a href="#">About me</a>
        <ul>
            <li>
                <a href="#">Item 1</a>
            </li>
            <li>
                <a href="#">Item 1</a>
            </li>
            <li>
                <a href="#">Item 1</a>
            </li>
        </ul>
    </li>
 <ul>

这是你期望做的吗？