Question

我的侧边栏由HTML和Materialize CSS组成，我每次使用侧边栏进行导航时都会尝试将活动类添加到listitem。

                <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，但它不起作用。任何列表项上的活动类不显示。这是我的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。其次，您不需要使用开关盒只需检查每个开关盒的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");
     })
});

实现CSS和JQUERY - 边栏活动类不添加？

1 个答案: