Question

I have a tabbed setup on the page and I want to automatically make corresponding menu tab highlighted as well as corresponding content div show depending on # hash.

Example:

http://design.vitalbmx.com/user_menu/member_profile_so.html — no hash, opens 1st tab

http://design.vitalbmx.com/user_menu/member_profile_so.html#setup — #setup, should open “Setup” tab

As you can see it works for highlighting “Setup” tab. But content div does not change.

The script is below:

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

Note that it works when you actually click menu tabs.

Any help to fix this problem would be greatly appreciated.

Answer 1

Move the script to the very bottom of the page, after the profile_content divs. That way they will be in the DOM before the scripts run. It is also best to put scripts at the bottom of the page for speed reasons.