I'm a little confused, but before I examine more closely, one thing I'd like an answer to is whether you have defined the initial "active" <a> incorrectly.
You gave the link to http://www.thomasrugani.com/static/designobjects/02.html That's 02.html - NOT 01.html Yet, when I look at the source of 02.html, here is what I see: <li><a href="01.html" class="active">Design Objects</a><br/></li> Maybe your definition of "active" should refer to all the 02's? It would help to see your class styling for active. Can you move it into the source, so that View Page Source will show what the styling criteria is? Also, post a description of what the "active" style is supposed to change? What are you trying to do? It is confusing that every one of your pages: 01, 02, and 03 show 01 as active in the source. On a last-second re-look, it occurs to me that your <a> causes a re- direct to another page. How do you stall (delay) (avoid immediate loss of control) in order to change the class in the current page script? Once you redirect, I think you are gone. Your current page loses control. I have had this happen in another context, so I bet this is it. Do not use <a>. Use just the <li> and give it a style that makes it look like a link. Use onclick() only in your Jquery. In your Jquery, change the class, and then.... redirect. I believe it is a javascript "window.location=..." that accomplishes the same thing is <a>'s re- direct. window.location = 'http://www.yourdomain.com' // this immediately takes you to the page yourdomain. Now, once you are in the new page, the importance of knowing what element had the active class in the previous page is defeated. In the new page, you will know nothing about what used to be in the old page. So, what is the point of the needing to know active class if you are leaving the page?
