Question

我试图通过使用jQuery将css类重新分配给列表项来显示哪个菜单项是活动的。我在网上查看了一些例子并尝试了一些不同的例子，但我似乎无法让我的工作。有人可以看看我上次尝试的代码并告诉我我做错了什么吗？谢谢你的帮助。

HEAD标签中的脚本：

<script type="text/javascript" src="script/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#topnavi ul li a").click(function () {
            if ($(this).parent("li").hasClass(".select"))
                $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
            $(this).parent("li").removeClass(".norm").addClass(".select");
        });
    });
</script>

HTML：

        <div id="topnavi">
            <ul>
                <li class="select"><a href="Default.aspx">HOME</a></li>
                <li class="norm"><a href="AboutUs.aspx">ABOUT US</a></li>
                <li class="norm"><a href="Services.aspx">SERVICES</a></li>
                <li class="norm"><a href="Packages.aspx">PACKAGES</a></li>
                <li class="norm"><a href="Comments.aspx">COMMENTS</a></li>
                <li class="norm"><a href="ContactUs.aspx">CONTACT US</a></li>
                <asp:LoginView ID="lvBackgroundSound1" runat="server">
                    <RoleGroups>
                        <asp:RoleGroup Roles="administrator"><ContentTemplate><li class="norm"><a href="administration/ManageComments.aspx">ADMIN</a></li></ContentTemplate></asp:RoleGroup>
                    </RoleGroups>
                </asp:LoginView>
            </ul>
        </div>

当点击列表项中的新锚点时，我想指定＆＃34; norm＆＃34;将类放到先前选定的锚周围的列表项中，并指定＆＃34;选择＆＃34; class到新选定锚点周围的列表项。

Answer 1

使用counter++，hasClass和addClass时，您不需要在课程名称前加点。
变化

removeClass

到

if ($(this).parent("li").hasClass(".select"))
                $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
            $(this).parent("li").removeClass(".norm").addClass(".select");

Answer 2

结合Tobias的回答，您可能希望在代码的这一部分添加一些左括号

if ($(this).parent("li").hasClass(".select")) {
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
    $(this).parent("li").removeClass(".norm").addClass(".select");
}

或者那些东西。您也可以使用.toggleClass（）而不是删除和添加类。

Answer 3

添加Tobias已提及的内容，更改

if ($(this).parent("li").hasClass(".select"))
    $("#topnavi ul li a").parent("li").removeClass(".select").addClass(".norm");
$(this).parent("li").removeClass(".norm").addClass(".select");

要

$("#topnavi ul li").removeClass("select").addClass("norm");
$(this).parent("li").removeClass("norm").addClass("select");

这将确保select课程仅分配给选定的li，其他li元素将分配norm课程。

使用jQuery更改CSS类

3 个答案: