Interface à onglets utilisant jQuery, impossible de rendre l'onglet 'en cours' comme paramètre d'opacité

Question

J'ai adapté un didacticiel d'interface à onglets jQuery pour créer une interface permettant de visualiser certaines images. L'onglet actif devrait avoir une opacité de 1, mais avec le code que j'utilise, la classe 'current' est assignée au 'a' de l'onglet quand on clique dessus, mais l'opacité ne change pas, et reste à .3. Je souhaite que je puisse obtenir cet effet sans utiliser les paramètres d'opacité css afin qu'il fonctionne avec les navigateurs qui ne le supportent pas. Je suis très nouveau à Jquery toute aide serait très appréciée.

 // Initialize. 
function init_tabs() { 

// Does element exist? 
if (!$('ul.tabs').length) { 

// If not, exit. 
return; 
} 

// Reveal initial content area(s). 
$('div.tab_content_wrap').each(function() { 
$(this).find('div.tab_content:first').show(); 
}); 

$('ul.tabs a').css({ opacity: .3 }); 
$('ul.tabs a.current').css({ opacity: 1 }); 

$('ul.tabs a:not(.current)').hover(
function() { 
$(this).fadeTo("fast", 1); 
}, 
function() { 
$(this).fadeTo("fast", .3); 
} 
); 

// Listen for click on tabs. 
$('ul.tabs a').click(function() { 

// If not current tab. 
if (!$(this).hasClass('current')) { 

// Change the current indicator. 
$(this).addClass('current').css({opacity: 1}).parent('li').siblings('li') 
.find('a.current').removeClass('current').css({opacity: .3}), 


// Show target, hide others. 
$($(this).attr('href')).fadeIn(300).siblings('div.tab_content').hide(); 
} 

// Nofollow. 
this.blur(); 
return false; 
}); 
} 

// Kick things off. 
$(document).ready(function() { 
init_tabs(); 

});

Answer 1

Le problème semble être ce code:

$('ul.tabs a:not(.current)').hover(
    function() { 
     $(this).fadeTo("fast", 1); 
    }, 
    function() { 
     $(this).fadeTo("fast", .3); 
    } 
); 

Vous définissez dans les onglets hovers non courants. Ce survol reste en place même après avoir modifié la classe de l'onglet. Donc, vous passez la souris sur l'onglet, vous cliquez dessus, il change en classe current et lorsque vous passez la souris, il revient à l'opacité .3, malgré le nouveau nom de classe; Vous devez faire quelque chose pour gérer le vol stationnaire pour tous les onglets, même celui en cours.

Si vous changez votre code de vol stationnaire à cela, il devrait fonctionner:

$('ul.tabs a').hover(
    function() { 
     if(!$(this).hasClass("current")) { 
      $(this).fadeTo("fast", 1); 
     } 
    }, 
    function() {  
     if(!$(this).hasClass("current")) { 
      $(this).fadeTo("fast", .3); 
     } 
    } 
); 

Exemple: http://jsfiddle.net/TLshW/

Answer 2

Il me semble que vous supprimez le droit de la classe 'actuelle' après que vous ajoutez:

Ajouté ici:

$(this).addClass('current'). 

Retirées ici:

.find('a.current').removeClass('current')... 

Le .Find sera trouver l'onglet précédent qui a déjà class = 'current' ainsi que votre onglet cliqué que vous venez d'appliquer class = 'current'