Drupal – Quick Tabs Deep Linking

The Quick Tabs allows you to aggregate different content in a single page using tabs. You can either load all the tabs at once or use Ajax to retrieve the tab content. But in both cases, you can’t get the direct link of a specific tab.

So i create the following Javascript to tackle this problem. After applying it, the page will reload every time when the user click the tab and the URL is also updated.

// ------------------------------------------------------------
// Quick Tabs deep linking work around
// ------------------------------------------------------------
$('.quicktabs_tabs a').each(function(){
  // Unbind the quick tabs action
  $(this).unbind('click');

  // Refresh page whenever the tab is clicked
  $(this).click(function(){
    window.location.href = $(this).attr('href');
  });
});

Remember to set the tab to Ajax so it would not load all the tab content since we will refresh each tab anyway.

Done =)

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.