jQuery：不执行功能的一部分

Question

我在页面上有一个选项卡式设置，我想自动根据＃hash高亮显示相应的菜单选项卡以及相应的内容div显示。

例子：

http://design.vitalbmx.com/user_menu/member_profile_so.html - 没有散，打开第一个选项卡

http://design.vitalbmx.com/user_menu/member_profile_so.html#setup - #setup，应该打开 “设置” 选项卡

正如你可以看到它的工作原理为突出 “设置”标签。但内容div不会改变。

的脚本如下：

 
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(); 
} 

注意，它的工作原理，当你实际点击菜单选项卡。

任何帮助解决这个问题将不胜感激。

Answer 1

将脚本移动到页面的最底部，位于profile_content div之后。这样他们将在脚本运行之前在DOM中。 It is also best to put scripts at the bottom of the page for speed reasons。

Answer 2

该部分代码不在jQuery ready()调用中，因此DOM在运行时尚未加载。

编辑：标签工作的原因是脚本看起来在HTML内容的中间。剧本出现在剧本之前，内容随之而来。所以标签加载，内容部分不是。

这样做：

$(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(); 
    } 

}); 

或者只是把脚本在页面的末端。无论如何，好主意总是使用ready()。

Answer 3

尝试设置你的<li>元素像这样：

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

可以更方便地写一些jQuery来标签，像这样：

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) 
    } 
});