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:
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.
You can easily do so. The quickest way is to pull the related css lines out of the default stylesheet and modify them to suit your needs. You can do it from scratch as well but a lot of css formatting is needed to make the tabs work correctly so it is nice to have a starting point.