添加/删除类

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

希望有所帮助。