Question

I am trying to replicate the Navigation Buttons which exist within the ASP.NET Site:
http://forums.asp.net/user/editprofile.aspx# (you have to log-in to see the tabs)

As you can see for an onClick Event the background of the Tab changes to white and the Text changes from Blue to Black. There is also a top left and right border applied to the Tab for an onClick. Also on the Hover the underline for the Button’s Hyperlink appears.

I tried to replicate as much as I could with Firebug, but Im missing some things. For example in my Fiddle the Button’s Hyperlink remains underlined.

Im also very unclear about the Click Event within the JQuery and how this is changing the background color from blue to white, and how the border is applied.
if anyone could improve upon this I would really appreciate it.

Here is what I have so far: http://jsfiddle.net/NinjaSk8ter/XrQys/

Answer 1

I don’t have access to the page but if you look at the CSS it should be pretty straight forward to see what they are doing. A great way to do this is to use Chrome and then when you right click on an item you can say “Inspect Element” and it will show you the CSS classes that are applied to the element/link.

To remove the underline on a hyperlink look at CSS’s text-decoration.

Usually to change the color of a button with jQuery, the easiest way is to use the .click() method and then to add a class to the object.

$('a#my_link').click(function(){
  $(a#my_link.active).removeClass('active');
  $(this).addClass('active');
  ... do other stuff
}

untested

http://jsfiddle.net/CrvJN/8/

Notes about what I did:

• removed the background-color for .common-heading-tabs a this way the blue and white class could actually have an effect
• add/removed the blue/white class based on the click
• returned false in order to make sure the anchor tag didn’t perform an unwanted action
• white == active in this case
• added class=”blue” to each anchor

There are some other improvements you could do on .common-heading-tabs a and .common-heading-tabs, but that’s outside the scope of this question. I would suggest going through W3School’s lessons on CSS to get a better idea of what is available so you aren’t having to copy and paste so much compiled CSS from sites. IMHO. 🙂