使用jQuery更改CSS类

Question

I am trying to show which menu item is the active one when it's clicked on by reassigning a css class to the list item using jQuery. I've looked at some examples online and tried some different ones, but I can't seem to get mine to work at all. Can someone look at my code from my last try and tell me what I am doing wrong? Thanks for your help.

Script in HEAD tag:

<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>

When a new anchor in a list item is clicked on, I would like to assign the "norm" class to the list item surrounding the previously selected anchor and assign the "select" class to the list item surrounding the newly selected anchor.

Answer 1

You don't need the dot before the class name when using hasClass , addClass and removeClass .
Change

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

to

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

In conjunction with Tobias' answer, you might want to add some opening brackets to this part of the code

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

Or something along those lines. You could also use .toggleClass() instead of removing and adding the classes.

Answer 3

Adding to what Tobias already mentioned, change

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

To

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

This will make sure select class is assigned only to the selected li and rest other li elements will have norm class.