Question

can you have images as backgrounds or any other additional formatting for jquery tabs. every example that i have seen is only showing simple white tabs like this:

http://yensdesign.com/tutorials/tabs/

i am trying to see if i can replace a current jpg image map (on this page http://www.salemgolfclub.org/) with jquery tabs:

Answer 1

Each tab is simply an HTML li element, so you should be able to modify its stylesheet properties to make it look however you want.

Here is the relevant HTML for the tabs:

<ul class="menu">
    <li id="news" class="">News</li>
    <li id="tutorials" class="">Tutorials</li>
    <li id="links" class="active">Links</li>
</ul>

The look of the tabs are controlled exclusively with CSS. Any li element with a class of “active” that is within any ul element with a class of “menu” has a specific look to it. Similarly, li elements with no class name are styled differently.

When each li element is clicked, a hidden div element on the page appears in the area beneath the tabs. This is controlled with the jQuery tabs extension, which adds a click event to all li elements in the menu ul. In order to leverage this tabs extension as is, you will need to have one div element that corresponds to a single tab already on the page when it loads.

This means that you will need to have all the content of all the pages (Home, Course Bio, Pro Shop, Score Card, Outings & Events, Members, Directions, and Contact Us) already on the page, which I would highly recommend against, given the number of pages you’re trying to mold this tabs idea to. I would instead modify the tabs extension to load a page when a tab is clicked, not a pre-loaded page element.