Materialise CSS and JQUERY - Sidebar active class 不添加？

Question

我的侧边栏由 HTML 和 Materialize CSS 组成，每次使用侧边栏导航时，我都试图向列表项添加一个活动的 class。

                <ul id="slide-out" class="side-nav fixed sidebar">
                    <li class="logo">
                        <a href="#!" class="brand-logo">
                            <img class="responsive-img" src="Images/communicarelogo.png" />
                        </a>
                    </li>
                    <li id="healthrecord" class="bold">
                        <a href="HealthRecords.aspx" class="waves-effect waves-teal">Health Records</a>
                    </li>
                    <li id="medmgt" class="bold">
                        <a href="MedicationsManagement.aspx" class="waves-effect waves-teal">Medications Management</a>
                    </li>
                    <li id="healthprogram" class="bold">
                        <a href="HealthPrograms.aspx" class="waves-effect waves-teal">Health Programs</a>
                    </li>
                    <li id="reports" class="bold">
                        <a href="Reports.aspx" class="waves-effect waves-teal">Reports</a>
                    </li>
                    <li class="divider"></li>
                    <li class="bold">
                        <a href="#" class="waves-effect waves-teal">My Profile</a>
                    </li>
                    <li class="bold">
                        <a href="#" class="waves-effect waves-teal">Change Password</a>
                    </li>
                </ul>

我尝试使用 JQUERY 但它不起作用。活动 class 不显示 任何列表项。这是我的 JQUERY 代码。

$(function () {
    var link = $('.sidebar-nav li a');
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $(link).each(function () {
        switch (pgurl) {
            case "HealthRecords.aspx":
                $('#healthrecord').addClass('active');
                break;
            case "MedicationsManagement.aspx":
                $('#medmgt').addClass('active');
                break;
            case "HealthPrograms.aspx":
                $('#healthprogram').addClass('active');
                break;
        }
    });
});

非常感谢！

Answer 1

首先你的类错了！您的 ul 的名称是：side-nav 而不是 sidebar-nav。其次你不需要使用 switch case 只需检查每个的 href:

$(function() {
     var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
     $(".side-nav li a").each(function(){
          if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
          $(this).addClass("active");
     })
});

Materialise CSS and JQUERY - Sidebar active class 不添加？

Materialize CSS and JQUERY - Sidebar active class does not add?

css

asp.net

jquery

materialize