2011-01-01 5 views
0

So arbeite ich in dieser SeiteJQuery Tabs - Ändern CSS auf einer bestimmten Registerkarte je

http://universidadedoingles.com.br/text-tabs/tabs-text.html

Wie euch sehen können, ich habe vier Registerkarten und einen Pfeil rechts unten, ich brauche zu tun dass der Pfeil unter die ausgewählte Registerkarte fällt, wenn ein Klick auf die Registerkarte 3, dieser Pfeil sollte unter die Registerkarte 3 gehen, einfach so! aber ich weiß es nicht!

Sie können auch sehen, dass beim Laden der Seite auf der Registerkarte 1 und Sie klicken auf der Registerkarte 2 die Wirkung I funktioniert ziemlich gut wollen, Hier `s die jquery ich dafür bin mit:

 $(document).ready(function() { 
      $("a.tab2").click(function() { 
       $(".arrow-spacer").addClass("tabs2"); 
      }); 
    }); 

dass` s es, vielen Dank für jede Art von Hilfe. S. - Ich benutze einen Mac, also gibt es noch keinen IE zum testen, das sieht in Safari und Chrome gut aus.

Antwort

1

Wenn man sich die CSS für tabs1 aussehen & Tabs2 Der einzige Unterschied ist der linke Rand. So können Sie nur den linken Rand Eigenschaft einstellen:

Aktuelle CSS:

.tabs1 { 
    background-image: url('up-arrow.png'); !important 
    background-repeat: no-repeat; 
    width:35px; 
    height: 17px; 
    margin: -16px 0px 0px 10px; 
} 

.tabs2 { 
    background-image: url('up-arrow.png'); !important 
    background-repeat: no-repeat; 
    width:35px; 
    height: 17px; 
    margin: -16px 0px 0px 90px; 
    /*position: absolute;*/ 
/* border: 2px solid green;*/ 
} 

den linken Rand ändern auf der Registerkarte Basis ausgewählt:

$('#tabs').bind('tabsselect', function(event, ui) { 
    var leftMargin = "16px"; 
    switch(ui.index) 
    { 
     case 0: 
     leftMargin = "16px"; 
     break; 
     case 1: 
     leftMargin = "90px"; 
     break; 
     case 2: 
     leftMargin = "164px"; 
     break; 
     case 3: 
     leftMargin = "238px"; 
     break; 
    } 
$(".arrow-spacer").css("margin-left",leftMargin); 
}); 
+0

Brendan, es gibt keine Worte um zu beschreiben, wie sehr ich dir Bruder bin! Das Ergebnis, das ich verfolgte! tausend Dank! –

0

Sie haben hier ein paar Optionen.

Ich würde die CSS-Klasse ändern bereits von den JQuery Tabs verwendet: .ui-Tabs ausgewählten

Oder einige Javascript wie diese versuchen:

$(document).ready(function() { 
    $('#tabs ul li a').click(function() { 
    // remove class 'tabs2' if its been set at all. 
    $('#tabs ul li a').removeClass('tabs2'); 
    // add class 'tabs2' to the clicked element. 
    $(this).addClass('tabs2'); 
    }); 
}); 
+0

Luke, einige seltsame Ergebnisse beantworten zurückkehrte, aber die nächste Antwort kam, es zu tun! Vielen Dank für deine Antwort! –

+0

Jeff, ich habe mir nicht angeschaut, wie der Pfeil tatsächlich zur Seite hinzugefügt wurde:/- Ich würde eher eine Lösung zum Hinzufügen/Entfernen der Klasse verwenden, anstatt herumzuspielen und den Rand zu ändern ... das muss sich ändern Wenn sich Ihre Schriftart ändert? –

Verwandte Themen