Question

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

示例：

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

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

编辑：标签工作的原因是脚本似乎位于HTML内容的中间。 tas在剧本之前，内容在之后。因此加载了标签，而内容部分则没有。

这样做：

$(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 2

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

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

jQuery：不执行的函数的一部分

3 个答案: