Hi,
I am trying to create tabs with content using jquery ui, where both the tabs and content share one background image, as seen in the image below.
And click on each tab changes the background to its corresponding image.
I am a bit lost on this, so any idea how this can be achieved in terms of div and css, with or without jquery?
Many thanks in advance!
One way you could do it, is make the content div extend to the top of the tabs and give it a top padding to make sure the content starts below the tabs.
Then make the active tab transparent, and give the other tabs a background color, as well as adding a white div in between the tabs to hide the rest of the background.
Things get a lot trickier once you add rounded corners to both the tabs and the content.
I would first probably attempt to just position the same image in each tab. By using background position you should be able to position it pixel perfect.
I didn’t think of that, that’s probably a much better solution.
You’d probably not want to show the background image to a user without javascript though as it will look really weird if they aren’t positioned. (This is supposing you will position the background image with javascript, which makes the most sense)
Here is how to do that if your asking. { visibility: inherit; } Graceful Degrading Javascript ~ Add CSS With Javascript!
I’d do it much like Eric said and here’s a quick (rough and ready) demo. (Excuse the jquery but it would take me to long to do it manually) :).