können Sie jquery Tabs formatieren

Question

können Sie Bilder als Hintergründe oder andere zusätzliche Formatierung für Jquery-Registerkarten haben. jedes Beispiel, das ich je gesehen habe ist nur einfache weiße Registerkarten wie folgt zeigt:

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

ich zu sehen bin versucht, wenn ich eine aktuelle jpg Bild Karte ersetzen kann (auf dieser Seite http://www.salemgolfclub.org/) mit jquery Tabs:

Answer 1

Jede Registerkarte ist einfach ein HTML-Element li, so sollten Sie in der Lage sein, seine Stylesheet-Eigenschaften zu ändern, damit es wie Sie wollen aussehen.

Hier ist der relevante HTML für die Registerkarten:

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

Das Aussehen der Tabs werden ausschließlich mit CSS gesteuert. Jedes li Element mit einer Klasse von "aktiv", die innerhalb eines ul Elements mit einer Klasse von "Menü" ist, hat ein bestimmtes Aussehen. In ähnlicher Weise werden li Elemente ohne Klassennamen unterschiedlich formatiert.

Wenn jedes Element angeklickt wird, erscheint ein verstecktes div Element auf der Seite im Bereich unterhalb der Registerkarten. Dies wird mit der Erweiterung jQuery tabs gesteuert, die allen li Elementen im Menü ul ein Klickereignis hinzufügt. Um diese Tabulatorenerweiterung so zu nutzen, wie sie ist, müssen Sie ein div Element haben, das einer einzelnen Registerkarte bereits auf der Seite beim Laden entspricht.

Dies bedeutet, dass Sie den gesamten Inhalt aller Seiten (Home, Kurs Bio, Pro Shop, Score Card, Ausfahrten & Veranstaltungen, Mitglieder, Richtungen und Kontakt) bereits auf der Seite haben müssen, die ich würde sehr empfehlen, angesichts der Anzahl der Seiten, die Sie versuchen, diese Tabs Idee zu formen. Ich würde stattdessen die Tabulatorenerweiterung ändern, um eine Seite zu laden, wenn auf eine Registerkarte geklickt wird, nicht ein vorinstalliertes Seitenelement.

Answer 2

Sie können dies leicht tun. Der schnellste Weg besteht darin, die zugehörigen CSS-Zeilen aus dem Standard-Stylesheet zu ziehen und sie an Ihre Bedürfnisse anzupassen. Sie können es auch von Grund auf neu machen, aber es ist eine Menge CSS-Formatierung nötig, damit die Tabs korrekt funktionieren, also ist es schön, einen Startpunkt zu haben.