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 =)

15 thoughts on “Drupal – Quick Tabs Deep Linking”

  1. Thanks for sharing! I’ve been looking for something like this. Pardon me, however, for asking what might seem like a dumb question: In which file exactly should I insert the snippet, and at what location within that file?

    I’m no developer, see, and don’t have a lot of experience with actual code.

    Cheers

    Like

    1. Hi Miguel,

      first you need to create a javascript file in your theme. you can follow the post below
      Drupal – Add Javascript in Theme

      And then you could put the following code in the newly created .js file.

      $(document).ready(function() {
        // ------------------------------------------------------------
        // 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');
          });
        });
      });
      

       

      Clear the drupal cache and see if it works.

      Kit

      Like

    1. O, sorry, there should be nothing to do with ajax and it should be set to ajax. i think the javascript code was not run.

      could you add modify the javascript as follow

      $(document).ready(function() {
        // ------------------------------------------------------------
        // Quick Tabs deep linking work around
        // ------------------------------------------------------------
        $('.quicktabs_tabs a').each(function(){
          alert('start');
          // Unbind the quick tabs action
          $(this).unbind('click');
      
          // Refresh page whenever the tab is clicked
          $(this).click(function(){
            window.location.href = $(this).attr('href');
          });
          alert('end');
        });
      });
      

       

      Did the alert boxes come up?

      Like

  2. Ok, the alerts do work but the page displays the same when I click on the link for the tab.

    I just tested in Konqueror and it seems to work fine. I have been using different versions of firefox, does that help in any way?

    Thanks again.
    Sam

    Like

    1. The rendered layout is distorted becoz of the anchor part of the URL(#quicktabs-get_involved) but normally it should not alter the layout. Anyway, i think a simple workaround is trimming the anchor part of the URL.

      Try this

      $(document).ready(function() {
        // ------------------------------------------------------------
        // 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(){
            var qtlink = $(this).attr('href');
            window.location.href = qtlink.substring(0, qtlink.indexOf('#'));
          });
        });
      });
      

      Dose it work?

      Like

  3. Same thing, except now, the page loads as if the Tabs were the top of the page.

    Very strange, Like I said, it works fine in Konqueror Not sure about other browsers, but can install some and test.

    Thanks
    Sam

    Like

    1. That’s weired. if you could remove the anchor part of the url in each tab link, it should work.
      1. http://nmsea.org/sun/get-involved?quicktabs_get_involved=1
      2. http://nmsea.org/sun/get-involved?quicktabs_get_involved=2
      3. http://nmsea.org/sun/get-involved?quicktabs_get_involved=3
      4. http://nmsea.org/sun/get-involved?quicktabs_get_involved=4

      The above 4 deep links should work. when i visit http://nmsea.org/sun/get-involved, i found that the tab links still have the anchor part.

      Like

  4. Ok, just FYI,

    Discovered this morning, that with that last bit of Java, Tabs that were not being called by links (just click on the tab) were loading like the links used to. I renamed the script file out of the way, cleared the cache and everything is working correctly. Not sure why, but it seems that just dropping the anchor is the key.

    Thanks again
    Sam

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.