Problemen met JQuery addClass en removeClass in IE6

[Verwijderd]

Dag iedereen,

Ik ben momenteel bezig aan het cross-browser compatibel maken van een website en ik heb een bug die mij al ettelijke uren op mijn zenuwen werkt. Ik heb namelijk een div waarin 4 andere divs staan.
De bug doet zich voor bij het wisselen van classes in IE6 door gebruik van jQuery.

De hoofd div: Deze is een container waarin ik 2 tabs ga maken. Elke tab heeft een actieve en inactieve laag.

De linker tab: Deze tab is standaard niet actief en heeft een class "pdp_tab1_inactive" op het laden van de pagina.

De rechter tab: Deze tab is standaard actief en heeft een class "pdp_tab2_active" op het laden van de pagina.

Ik maak gebruik van jQuery om te wisselen van class en inhoud van het hoofd venster onder de tabs.

Hier is de simplistische code.

code:

<div id="pdp_tab1" class="pdp_tab1_inactive" onclick="
   $(this).removeClass('pdp_tab1_inactive').addClass('pdp_tab1_active');
   $("#pdp_tab2").removeClass('pdp_tab2_active').addClass('pdp_tab2_inactive');
">
</div>

<div id="pdp_tab2" class="pdp_tab2_active" onclick="
   $(this).removeClass('pdp_tab2_inactive').addClass('pdp_tab2_active');
   $("#pdp_tab1").removeClass('pdp_tab1_active').addClass('pdp_tab1_inactive');
">
</div>

Ik weet niet met 100% zekerheid of dit volledig correct is. Maar om met jullie hulp te kunnen debuggen zou ik graag hier beginnen om zeker te zijn dat de fout niet in dit stuk code zit, maar in de omringende code.

Hopelijk zijn hier een paar snuggere breinen die mij kunnen helpen dit probleem op te lossen

[Verwijderd]

Allereerst zou ik de javascript uit de HTML halen en netjes op de jQuery manier werken:

JavaScript:

$('#pdp_tab1').click(function() {
    $(this).removeClass('pdp_tab1_inactive').addClass('pdp_tab1_active');
    $("#pdp_tab2").removeClass('pdp_tab2_active').addClass('pdp_tab2_inactive');
});
$('#pdp_tab2').click(function() {
    $(this).removeClass('pdp_tab2_inactive').addClass('pdp_tab2_active');
    $("#pdp_tab2").removeClass('pdp_tab1_active').addClass('pdp_tab1_inactive');
});

Daarnaast zijn er genoeg functies in jQuery (en jQuery UI) en plugins die dit soort trucjes met één regel code kunnen oplossen.

[Bosmonster]

Sowieso snap ik niet zo goed waarom je 4 classes nodig hebt voor iets dat ook met 1 kan.

[Verwijderd]

Die 4 classes gebruik ik omdat IE6 moeite heeft met meerdere classes. In de CSS stonden eerst combinaties van classes, ook dubbel gezet soms. Ik heb gewoon verder gebouwd op hetgeen mijn collega gemaakt had.

Bedankt Terminal13, ik zal het eens op die manier proberen. Maar ik heb binnen mijn onclick event ook nog andere dingen staan. Ik genereer daar namelijk een set radiobuttons. Moet ik deze dan ook plaatsen binnen deze jQuery functie?

EDIT:
Ik heb zojuist mijn jQuery verplaatst en aangepast zodat ze het zelfde doet als eerst, maar dan op deze manier

JavaScript:

$('#pdp_tab1').click(function() {
    $(this).removeClass('pdp_tab1_inactive').addClass('pdp_tab1_active');
    $("#pdp_tab2").removeClass('pdp_tab2_active').addClass('pdp_tab2_inactive');
});

Helaas, zoals verwacht, doet het script ook identiek het zelfde. Dit wil dus zeggen dat mij probleem nog steeds niet is opgelost voor IE6. Het werkte voorheen al in FireFox, Chrome, Opera en IE7 en 8. Maar bij IE6 geeft hij nog steeds het zelfde probleem bij het wisselen van de classes.

[ Voor 41% gewijzigd door Verwijderd op 27-01-2011 10:02 ]

[BtM909]

Ik ben benieuwd tegen welke IE6 multiple class bug jij tegenaanloopt Misschien handiger om even naar Bosmonster te luisteren en nogmaals goed duidelijk maken wat je wilt bereiken.

Daarnaast heb je niet precies verteld wat het probleem is waar je tegenaanloopt nu met IE6. Wat wil je nou steeds doen... Een Class toggelen?

[Verwijderd]

Ja, in principe wil ik een class toggelen als je op een tab (div) klikt. Maar het vreemde is, dat het met die gelinkte code niet lukt. Ik denk eerder dat het probleem hoger ligt.

Ik weet niet of er iemand hier iets van isml kent, maar het probleem kan misschien daar ook liggen.

EDIT: Javascript lap verwijderd

Hier is een gedeeltelijke dump van de code die ik gekregen heb om te debuggen. Ik vreeg echter dat jullie hier weinig mee zijn

De bedoeling is dus inderdaad om bij het klikken op het linker tab, de rechter een andere class te geven zodat hij zichtbaar niet geselecteerd is, en omgekeerd.

[ Voor 78% gewijzigd door Verwijderd op 27-01-2011 14:02 ]

[X-Lars]

Je geeft nog steeds niet weer wat er eigenlijk wél gebeurt in IE6..

Maar trek alsjeblieft die vreselijke lap Javascript uit de inline click handlers. Die "isml" hoeven we uberhaupt niet te zien, maak eens een minimale testcase in html+js(+css). En verwijder dan eens alle irrelevante code (js), want nu worden er nog heel veel andere methods aangeroepen die misschien errors geven of anderszins van invloed zijn.

[Verwijderd]

Ik heb de lap javascript verwijderd en zal even een testcase maken. Ik zal deze waarschijnlijk vanavond of morgen posten. Ik zal jullie ondertussen even een screenshot geven van wat precies de bedoeling is.

Google Chrome:
Rechts actief, links niet actief


Links actief, rechts niet actief


IE6:
Rechts actief, links niet actief


Links actief, rechts niet actief


Zoals jullie kunnen zien hier, in Chrome werkt het prima (net zoals in Firefox en IE7+), maar in IE6 werkt het niet.

[Flowmo]

Zoals al eerder aangegeven, waarom kan je niet af met minder classes (zelfs 1), namelijk class="active". Dan is de standaard look van zo'n button net als de witte variant. En als je erop klikt wordt ie grijs met groen. En juist die variatie zet je in die active class.

[Verwijderd]

Flowmo schreef op donderdag 27 januari 2011 @ 14:11:
Zoals al eerder aangegeven, waarom kan je niet af met minder classes (zelfs 1), namelijk class="active". Dan is de standaard look van zo'n button net als de witte variant. En als je erop klikt wordt ie grijs met groen. En juist die variatie zet je in die active class.

Ik heb minstens 2 classes nodig hiervoor. Dit is geen button, maar een div. Er worden veel meer divs op deze pagina gebruikt, dus ik kan de standaard style voor een div niet zomaar aanpassen aangezien de CSS gebruikt word over heel de site. Dat zou veel te veel tijd kosten om alle pagina's aan te passen.

Bovendien weten we zelfs dan nog niet of het zou werken of niet. Aangezien we alsnog een class gaan moeten toevoegen en verwijderen via jQuery or javascript. En dat werkt nu ook niet, dus ik zie niet waarom het zoals in jouw suggestie wel zou lukken.

[Verwijderd]

De bugfix is door gegeven naar een collega van mij. Dit thread mag dus gesloten worden. Toch bedankt allemaal!!!