jQuery: partie d'une fonction qui ne s'exécute pas

Question

J'ai une configuration à onglets sur la page et je veux automatiquement mettre en surbrillance l'onglet du menu correspondant ainsi que le contenu div affiché en fonction de # hash.

Exemple:

http://design.vitalbmx.com/user_menu/member_profile_so.html - pas de hachage, ouvre son 1er onglet

http://design.vitalbmx.com/user_menu/member_profile_so.html#setup - #setup, devrait ouvrir "Setup" onglet

Comme vous pouvez le voir fonctionne pour mettre en évidence "Setup" languette. Mais le contenu div ne change pas.

Le script est ci-dessous:

 
var tab_content_current = 1; 
switch (window.location.hash) { 
    case '#activity': tab_content_current = 1; break; 
    case '#friends': tab_content_current = 2; break; 
    case '#photos': tab_content_current = 3; break; 
    case '#videos': tab_content_current = 4; break; 
    case '#setup': tab_content_current = 5; break; 
    case '#forum': tab_content_current = 6; break; 
    case '#blog': tab_content_current = 7; break; 
    case '#comments': tab_content_current = 8; break; 
    case '#favorites': tab_content_current = 9; break; 
    case '#profile-comments': tab_content_current = 10; break; 
    default: tab_content_current = 1; 
} 
if (tab_content_current != 1) { 
    change_active_tab (tab_content_current); 
} 
function tabs_toggle (id) { 
    if (id != tab_content_current) { 
    change_active_tab (id); 
    tab_content_current = id; 
    } 
} 
function change_active_tab (id) { 
    $j('.profile_tabs li').removeClass('active'); 
    if (id < 8) $j('.profile_tab_'+id).addClass('active'); 
    $j('.profile_content').hide(); 
    $j('#profile_content_'+id).fadeIn(); 
} 

Notez que cela fonctionne lorsque vous cliquez effectivement un onglet de menu.

Toute aide pour résoudre ce problème serait grandement appréciée.

Answer 1

Déplacez le script en bas de la page, après les divs content_content. De cette façon, ils seront dans le DOM avant l'exécution des scripts. It is also best to put scripts at the bottom of the page for speed reasons.

Answer 2

Cette partie du code ne se trouve pas dans un appel jQuery ready(), de sorte que le DOM n'est pas encore chargé lors de son exécution.

EDIT: La raison pour laquelle les onglets fonctionnent est que le script semble être au milieu du contenu HTML. Les tas viennent avant le script, et le contenu vient après. Ainsi, les onglets sont chargés et les sections de contenu ne le sont pas.

Faites ceci:

$(document).ready(function() { 

    var tab_content_current = 1; 
    switch (window.location.hash) { 
    case '#activity': tab_content_current = 1; break; 
    case '#friends': tab_content_current = 2; break; 
    case '#photos': tab_content_current = 3; break; 
    case '#videos': tab_content_current = 4; break; 
    case '#setup': tab_content_current = 5; break; 
    case '#forum': tab_content_current = 6; break; 
    case '#blog': tab_content_current = 7; break; 
    case '#comments': tab_content_current = 8; break; 
    case '#favorites': tab_content_current = 9; break; 
    case '#profile-comments': tab_content_current = 10; break; 
    default: tab_content_current = 1; 
    } 
    if (tab_content_current != 1) { 
    change_active_tab (tab_content_current); 
    } 
    function tabs_toggle (id) { 
    if (id != tab_content_current) { 
     change_active_tab (id); 
     tab_content_current = id; 
    } 
    } 
    function change_active_tab (id) { 
    $j('.profile_tabs li').removeClass('active'); 
    if (id < 8) $j('.profile_tab_'+id).addClass('active'); 
    $j('.profile_content').hide(); 
    $j('#profile_content_'+id).fadeIn(); 
    } 

}); 

Ou placez le script à la fin de la page. Bonne idée d'utiliser ready() de toute façon, cependant.

Answer 3

Essayez de régler vos <li> éléments comme ceci:

<ul class="profile_tabs light"> 
    <li class="profile_tab_1 active"><a href="#activity">Activity</a></li> 

vous pouvez plus facilement écrire quelques jQuery à onglet comme ceci:

var tab_content_current = 1; 
function GetIndex($obj) { return $(this).parent().children().index($obj); } 

$j(function(){ 

    $j(".profile_tabs li").click(function(e){ 
     e.preventDefault(); 
     change_active_tab(GetIndex(this) + 1) 
    }); 

    function change_active_tab (id) { 
     tab_content_current = id; 
     $j('.profile_tabs li').removeClass('active'); 
     if (id < 8) $j('.profile_tab_'+id).addClass('active'); 
     $j('.profile_content').hide(); 
     $j('#profile_content_'+id).fadeIn(); 
    } 

    var hash = window.location.hash; 
    if (hash != null && hash != "") 
    { 
     var $li = $(".profile_tabs li a[href=" + hash + "]"); 
     change_active_tab(GetIndex($li) + 1) 
    } 
});