0

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.

3 Answers 3

3

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");
4
  • I removed the dots in the recommended locations and I also did what Killswitch suggested. Now, when I click on a menu item, the style associated with the "select" class changes to the selected item, but it switches back to the Home menu item once the page fully loads. Any ideas?
    – cnotes
    Commented May 5, 2015 at 17:34
  • By "fully loads", do you mean that when a NEW page loads after you clicked on the link? Because all jQuery Events/Classes/Styles are reset when a page reloads. Commented May 5, 2015 at 19:03
  • Yes, I click on the link & the new link doesn't retain the attributes of the select class & goes back to the Home link. When I removed the select class hardcoded on the Home link, then the select class attributes just seem to appear & disappear when I clicked on a new link. The link should stay red until I click on another link. Can you briefly explain what you mean by jQuery events, etc reset when a page loads? Thanks!
    – cnotes
    Commented May 6, 2015 at 13:56
  • jQuery effects are only temporarily until page refresh or until a new page is loaded. You'd have to handle your issues in your backend (probably PHP). The browser doesn't remember the Classes when the page reloads. It just renders the new html code that it retrieves from the server. Therefore you need to manage dynamic classes based on the user location on your website on your server-side. Commented May 11, 2015 at 10:42
0

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.

0

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.

1
  • @Killswitch...I made the change you suggested. What happens now is that the menu item I click on merely flashes the attributes of the "select" class and returns to normal and being that the Home link has the "select" class hardcoded, it is highlighted even though that's not the current page. Any idea how to make the current menu item stay highlighted? Thanks!
    – cnotes
    Commented May 7, 2015 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.