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

您的datacenter似乎有问题

您可以尝试将其链接。

if (path.substring(0, href.length) === href) {

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>

这是您要做什么？

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

2 个答案: