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;
        }
      }
    );
  }

现在我正在尝试获取链接，然后将其类设置为活动状态，然后执行某些操作：

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')仅提供您在锚href属性上设置的属性值。如果您使用href使用锚元素的prop('href')属性，那么它将为您提供完整的网址。然后你可以比较完整的网址而不是分割和尝试网址的比较部分。试试这个。

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>";
}

设置导航的活动类

2 个答案: