設置活動類別進行導航

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