添加/刪除類

Question

我的HTML代碼如下所示：

<div id="sidebar-menu" class="main_menu_side hidden-print main_menu"> 
    <div class="menu_section"> 
     <ul class="nav side-menu"> 
      <li> 
       <a> 
        <i class="fa fa-home"></i>home 
        <span class="fa fa-chevron-down"></span> 
       </a> 
       <ul class="nav child_menu" style="display: none"> 
        <li> 
         <a href="testing2.php">Dashboard</a> 
        </li> 
        <li> 
         <a href="testing2.php#x-test">dashbord2</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a> 
        <i class="fa fa-edit"></i>form 
        <span class="fa fa-chevron-down"></span> 
       </a> 
       <ul class="nav child_menu" style="display: none"> 
        <li> 
         <a href="genform.php">general form</a> 
        </li> 
        <li> 
         <a href="formval.php">form validation</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

添加/基於當前的URL刪除類，我用這：

$(function() { 
    var url = window.location.href; 
    $('#sidebar-menu a[href="' + url + '"]').parent('li').addClass('current-page'); 
    $('#sidebar-menu a').filter(function() { 
     return this.href == url; 
    }).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active'); 
}); 

它的工作原理，但是當我點擊這個鏈接

<a href="testing2.php#x-test">dashbord2</a> 

類=「當前頁」不改變當前的路徑URL
我如何解決這個問題？

Answer 1

您的問題來自於頁面未被重新加載，當您單擊帶有散列的鏈接時，而您的代碼僅在頁面加載時執行，或者準備好準確無誤。解決的辦法是使用是否窗口的hashchange事件（在< IE8不支持），或者，像提到@sirrocco，使用click事件與setTimeout檢測哈希的變化：

function setCurrentMenuPage() { 
    var url = window.location.href; 
    var anchors = $('#sidebar-menu a'); 
    anchors.parent('li').removeClass('current-page'); 
    anchors.filter(function() { 
     return this.href == url; 
    }).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active'); 
} 
$(function() { 
    setCurrentMenuPage(); 
    $('#sidebar-menu a').on('click', function (e) { 
     if ($(this).attr('href').indexOf("#") >= 0) { 
      setTimeout(function() { 
       setCurrentMenuPage(); 
      }, 100); 
     } 
    }); 
}); 

希望有所幫助。