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>

根据当前网址添加/删除类，我使用的是：

$(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>

class =“current-page”不会更改为当前路径url
我怎么解决这个问题？

Answer 1

您的问题源于当您单击其中包含哈希的链接时未重新加载的页面，而您的代码仅在页面加载时执行，或者dom准备好准确。解决方案是使用窗口的hashchange事件（＆lt; 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);
        }
    });
});

希望有所帮助。

根据活动URL添加/删除类

1 个答案: