How to add  "active" states to buttons using jquery and css?

Posted on 2010-01-05
Last Modified: 2012-05-08
Here is what i am looking for. I have a menu setup of 5 buttons and when one of those buttons is hit it scroll over to that section of the page using jquery. I am pretty new to js and jquery so bare with me. What I am looking for is when I click on the button and it goes to that section of the page I want that button to have an active state. For example I hit the about button and it goes to the section about and lets say the about button goes from red to green and stays on green until I hit another button and then the about button changes back to red and the new button pressed goes to green.
Now I know how to do this using css and multiple pages but I am using js to scroll to each section not page.
I hope I explained this the best I could. I will incluse my source code, css, and js file.
Please take a look and help me with the code.

Question by:askurat1
    LVL 6

    Expert Comment

    by:Tony O'Byrne
    jQuery is great for doing this sort of thing. :)  Check out the code below - it should take care of it for you - I'm using something very similar for my own list-based navigation :)

    Also, I scanned your code *real* quick.  You have your script imports at the bottom of the page...  Instead, put them at the top of the page.

    General rule: Imports first.

    You have the right idea though - putting scripts at the bottom of the page is a good idea - it helps make sure that all your variables are defined before you try to use them (since there's no guarantee that the browser parses all the JS before executing it).

    But you need to have your imports at the top to ensure that everything is defined...  Check the second part of the code below for a general idea...
    /*  When the DOM is ready, attach these events to the list items  */
    $(document).ready( function(){
        $("#mainNav li").click( function(){
            $(this).siblings().removeClass("active");  //  Unset all other buttons
      <script src="whatever.js"></script>
      tons of body stuff
        /*  Your JavaScript Stuff  */
        /*  because all the imports are at the top, we know that everything is defined and we should have no problems  */

    Open in new window

    LVL 8

    Author Comment

    Thank you for the reply. I wasn't for sure about where to put the scripts considering i've seen it both ways but thinks for the tip.

    The example you show doesn't seem to work for me. I want the button to be active in whatever section it is in on the page. So if it is on the about section the about button stays active  until I move to another section.

    If you need anymore documentation I can give you it. I have added my js file with the code you gave me.

    LVL 6

    Accepted Solution

    My code above was assuming you had an "active" class for the list item...  I didn't look first.  Sorry about that. :)

    The steps below are about changing the active pseudoclass to a regular class, and identifying the anchor within the list-item clicked.

    I'm putting the event on the list item because it makes it easier to reference the sibling list items.

    K...  In your main.css file,
    Lines 87 through 91
    change the ":" to a "." (colon to period)

    And replace the jQuery code with the code below.  Hopefully that takes care of it.
    /* Event on list item... */
    $(document).ready( function(){
        $("#mainNav li").click( function(){
            $("a", this).siblings().removeClass("active");  //  Unset all other buttons
            $("a", this).addClass("active");

    Open in new window

    LVL 8

    Author Closing Comment

    Thank you so much. This works perfectly!

    Featured Post

    Gigs: Get Your Project Delivered by an Expert

    Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

    Join & Write a Comment

    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now