javascript - 更改导航栏中的事件类别

Question

我的代码已经改变了事件类，但它没有重定向到需要的相应页面。它只是在改变事件类。

Javascript:

 <script type="text/javascript">
        $(document).ready(function() {
            $("li").click(function(event) {
                event.preventDefault();
                if ($("li").hasClass('active')) {
                    $("li").removeClass('active');
                }
                $(this).addClass('active');
            });
        });
    </script>

HTML:

<div id="nav">
            <h1 class="bar bar-dark bar-no-shadows">Logic Call Suite <small>v3.0</small></h1>
            <ul>
                <li id="_dashboard" class="active">
                    <div class="nav-icon"><i class="icon-home"></i></div>
                    <div class="nav-content">
                        <a href="../Dashboard.aspx">
                            Dashboard <span>Your LCS Dashboard</span>
                        </a>
                    </div>
                </li>
                <li id="_admin">
                    <div class="nav-icon"><i class="icon-pencil"></i></div>
                    <div class="nav-content">
                        <a href="../Administration.aspx">
                            Admin Modules <span>Manage admin modules</span>
                        </a>
                    </div>
                </li>   
                <li id="_system">
                    <div class="nav-icon"><i class="icon-cog"></i></div>
                    <div class="nav-content">
                        <a href="../Maintenance.aspx">
                            Maintenance Modules <span>Manage Maintenance modules</span>
                        </a>
                    </div>
                </li>                   
                <li id="_reports">
                    <div class="nav-icon"><i class="icon-file"></i></div>
                    <div class="nav-content">
                        <a href="../Reports.aspx">
                            Reports <span>Report generation module</span>
                        </a>
                    </div>
                </li>       
                <li id="_logout">
                    <div class="nav-icon"><i class="icon-lock"></i></div>
                    <div class="nav-content">
                        <a href="../Login.aspx">
                        Logout <span>Session Logout</span></a>
                    </div>
                </li>                                       
            </ul>
        </div>

Answer 1

这是因为您正在调用 event.preventDefault()，它阻止了单击 anchor 元素的默认操作，即加载目标页面。

在您的情况下，由于您是在单击 anchor 元素时加载新页面，因此更改单击事件上的类是没有用的，因为当新页面加载时，当前的 dom 结构将被销毁，并且您分配的类不会被持久化。

相反，您可以在页面加载时使用路径匹配，并将具有当前页面 url 作为源的 li 标记为当前页面。

jQuery(function ($) {
    //remove the default active class, may not required if you can remove the active class assignment to the dashboard item
    $('#nav li.active').removeClass('active');
    //get the current page url(the last part of the url)
    var page = window.location.href.match(/[^/]+$/)[0];
    //then fine the li having the anchor with that url and add the class
    $('#nav li a[href$="' + page + '"]').closest('li').addClass('active');
});