To see an example of what I’m asking how to do view Apple OSX Downloads page. See just after the featured download where they have three tabs? If you click on a tab it swaps out the list with a new one and changes the button’s background image.
I’ve been trying to figure it out myself and as far as I can tell it’s a combination of CSS and JavaScript. I’m guessing that they are setting a rule that when one of those list items, the buttons, has “active” concatenated onto the end of it’s class they show certain content and hide other content. And they have a rule that’s specific to each of the three. I’ve done something sort of like this where you swap out an image for text in a title by making a span on the inside and giving it an absolute X position of -9999px or something along those lines.
Where I lose it is how do they change it without actually having an anchor tag around it for a link and how do they actually change the class name?
What I would love is if someone could give me a quick stripped down example of it or point me to a tutorial, that would be fantastic!
Also, what’s the browser compatibility for this? I know certain JS is safe for pretty much any of the main browsers (FireFox, Safari, IE 6, IE 7) and I’ve done something sort of like this where I used buttons to swap out images without refreshing the page.
Any help you guys can give me would be greatly appreciated!!!
