Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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

Posted on 2010-01-05
Medium Priority
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
  • 2
  • 2

Expert Comment

by:Tony O'Byrne
ID: 26182519
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


Author Comment

ID: 26182612
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.


Accepted Solution

Tony O'Byrne earned 2000 total points
ID: 26182709
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


Author Closing Comment

ID: 31672997
Thank you so much. This works perfectly!

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

581 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