设置活动类别进行导航

Question

我有一个单独的导航php，其中包含链接和菜单选项的列表：

 echo "<ul id='menu'>";
//some if loop to do the following:
    echo "<li><a href='#'>Adminstration</a>
                    <ul><li>";
            if($userm == 'R'||$userm == 'RW') {
                echo "<a href='/N.Jain/administration/usermanagement.php>User Management</a>";
                }

该文件有10个此类子菜单。 我要在这里实现的是，如果某个用户位于该特定页面上，则菜单应展开并突出显示该选项。

这是我的菜单javascript：

function initMenu() {
  $('#menu ul').hide();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }

现在，我试图获取链接，然后将其类设置为active，然后执行以下操作：

function markActiveLink() {
 $("#menu li ul li a").filter(function() {
  var currentURL = window.location.toString().split("/");
  return $(this).attr("href") == currentURL[currentURL.length-1];
 }).addClass("active");

if($('#menu li ul li a').hasClass('active') == true) {
    console.log('has');
 }
}

Answer 1

attr('href')仅给出属性值，无论您在anchor href属性上设置的是什么。 如果您使用prop('href')使用锚元素的href属性，那么它将为您提供完整的url。 然后，您可以比较完整的URL，而不必拆分并尝试比较URL的比较部分。 尝试这个。

function markActiveLink() {
   $("#menu li ul li a").filter(function() {
      return $(this).prop("href").toUpperCase() == window.location.href.toUpperCase();
   })
   .addClass("active")
   .closest('ul')        //get the closest ul 
   .slideDown('normal'); //expand it

   if($('#menu li ul li a').hasClass('active') == true) {
        console.log('has');
   }
}

注意我将href和location都转换为大写，以避免区分大小写。

prop() -获取匹配元素集中第一个元素的属性值。

Answer 2

使用PHP在输出它们时在适当的菜单项上输出“活动”类是否会更加有效？ 我不了解您要使用PHP输出菜单的情况是什么，但是JS在这里将菜单项标记为活动状态...

在输出菜单项时，如果那是当前菜单项，为什么不比较呢？

function isCurrentPage( $url ) {
    if( $_SERVER['REQUEST_URI'] == $url ) return true;
    return false;
}

if($userm == 'R'||$userm == 'RW') {
   echo "<a href='/path/to_file/usermanagement.php'".(isCurrentPage('/path/to_file/usermanagement.php') ? " class=\"active\" : "" ).">User Management</a>";
}