JQuery onglets, altérant problème de l'élément sélectionné

Question

J'utilise http://jqueryfordesigners.com/jquery-tabs/ pour un projet, le code tabulé ressemble à ceci: -

<script type="text/javascript" charset="utf-8"> 
$(function() { 
var tabContainers = $('div.tabs > div'); 
tabContainers.hide().filter(':first').show(); 

$('div.tabs ul.tabNavigation a').click(function() { 
tabContainers.hide(); 
tabContainers.filter(this.hash).show(); 
$('div.tabs ul.tabNavigation a').removeClass('selected'); 
$(this).addClass('selected'); 
return false; 
}).filter(':first').click(); 

}); 
</script> 

Cela fonctionne très bien, mais la conception exige que j'insère la classe sélectionnée sur la li tag, pas un tag. Lorsque je modifie le script pour faire cela, le show/hide de chaque onglet se brise. Des pensées sur quoi d'autre doit changer? Merci d'avance.

<script type="text/javascript" charset="utf-8"> 
$(function() { 
var tabContainers = $('div.tabs > div'); 
tabContainers.hide().filter(':first').show(); 

$('div.tabs ul.tabNavigation li').click(function() { 
tabContainers.hide(); 
tabContainers.filter(this.hash).show(); 
$('div.tabs ul.tabNavigation li').removeClass('selected'); 
$(this).addClass('selected'); 
return false; 
}).filter(':first').click(); 

}); 
</script> 

Answer 1

Il est un peu difficile de répondre à votre question sans plus d'informations. L'information manquante la plus importante est votre code HTML et CSS actuel, car il est maintenant possible de deviner pourquoi cela ne fonctionne pas.

Comme mentionné par Gnarf, votre code devrait changer un peu pour le faire fonctionner avec l'exemple HTML et CSS utilisé par la page que vous avez ce code de:

<script type="text/javascript" charset="utf-8"> 
$(function() { 
     var tabContainers = $('div.tabs > div'); 
     tabContainers.hide().filter(':first').show(); 

     $('div.tabs ul.tabNavigation li a').click(function() { 
      tabContainers.hide(); 
      tabContainers.filter(this.hash).show(); 
      $('div.tabs ul.tabNavigation li').removeClass('selected'); 
      $(this).closest('li').addClass('selected'); 
      return false; 
     }).filter(':first').click(); 

    }); 
</script> 

En outre, votre css devrait changer aussi, puisque la classe selected est maintenant définie sur le LI au lieu de sur le A. Je me demande pourquoi vous n'utilisez pas l'onglet-plugin fourni par JQuery UI. Il vous permet de configurer beaucoup de choses et ne nécessite pratiquement aucun code.

Answer 2

Vous accédez à this.hash sur un <li>, ce qui ne va pas obtenir ce que vous voulez.

Votre fonction doit changer un peu:

$(function() { 
    var tabContainers = $('div.tabs > div'); 
    tabContainers.hide().filter(':first').show(); 

    // you still want to bind to the "a" element, not the li 
    $('div.tabs ul.tabNavigation a').click(function() { 
    tabContainers.hide(); 
    // this.hash is the #whatever portion of the href 
    tabContainers.filter(this.hash).show(); 

    // remove selected class from LI's 
    $('div.tabs ul.tabNavigation li').removeClass('selected'); 

    // look for our closest li parent (jQuery 1.3+) and add the selected class. 
    $(this).closest('li').addClass('selected'); 

    return false; 
    }).filter(':first').click(); 

});