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（），这会阻止点击锚元素的默认操作，即加载目标页面。

在您的情况下，因为您在点击锚元素时加载新页面，所以没有用于更改click事件的类，因为当新页面加载时，当前dom结构将被销毁并且您指定的类不会坚持下去。

相反，您可以在页面加载时使用路径匹配，并将具有当前页面网址的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');
});

Answer 2

请删除

event.preventDefault();

来自您的代码。它阻止了默认操作

在nav li中更改活动类

2 个答案: