As is stated in #308633: direct url to a tab, it is straight forward to create a direct link to a quicktab without javascript.

What the following steps allow you to do is add a direct link to any quicktab from anywhere within your webpage without changing the url , which is the normal behavior if you click on any tab. FYI: Ajax loading is not affected.

1) Say you want to add a link from within the first tab to the second tab. In my case, the quicktabs number was 1. I added a link with the following code:

print (l(
  t('Click here for second tab')
  ,$_GET['q']
  ,array(
    'query' => array(
      'quicktabs_1' => '1'
    )
    ,'fragment' => 'quicktabs-1'
    ,'attributes' => array(
      'class' => 'dlink'  // this is to identify all the links that are to be treated as direct links to quicktabs
      ,'id'    => 'dlink-quicktabs-tab-1-1'  // this is a concatenation of keyword 'dlink' and the ID of the second tab
    )
  )
));

Which produces the following link:

  <a href="CURRENT_URL?quicktabs_1=1#quicktabs-1" class="dlink" id="dlink-quicktabs-tab-1-1">Click here for second tab</a>

If javascript is not enabled, link will go to second tab, but change the url.

2) Next, create a javascript file, which I name 'quicktabs_dlink.js', and add the following:

Drupal.behaviors.dlinkQuicktabs = function (context) {
  $('a.dlink:not(.dlink-processed)', context).addClass('dlink-processed).each(function(){
    $(this).unbind('click').bind('click',dlinkQuicktabsClick);
  });
};
var dlinkQuicktabsClick = function() {
  var tid = this.id.substring(this.id.indexOf('-')+1);
  $('#'+tid).trigger('click');
  return false;
}

3) quicktabs_dlink.js needs to be loaded when quicktabs is rendered, so add the following to your theme's template.php file.

function phptemplate_quicktabs_tabs($quicktabs, $active_tab) {
  drupal_add_js(drupal_get_path('theme','YOUR_THEME').'/js/quicktabs_dlink.js');
  return theme_quicktabs_tabs($quicktabs, $active_tab);
}

Clear your cache, and enjoy a direct link to any quicktab from anywhere on your page without changing the url.

Comments

escoles’s picture

escoles commented

JavaScript file appears to contain a syntax error.

Line 2 reads:

$('a.dlink:not(.dlink-processed)', context).addClass('dlink-processed).each(function(){

Appears that it should read:

$('a.dlink:not(.dlink-processed)', context).addClass('dlink-processed').each(function(){

ucaka’s picture

ucaka commented

1) A minor edit is needed for the class to become an array:

print (l(
  t('Click here for second tab')
  ,$_GET['q']
  ,array(
    'query' => array(
      'quicktabs_1' => '1'
    )
    ,'fragment' => 'quicktabs-1'
    ,'attributes' => array(
      'class' => array('dlink')  // here we edit class to become arrray
      ,'id'    => 'dlink-quicktabs-tab-1-1'  // this is a concatenation of keyword 'dlink' and the ID of the second tab
    )
  )
));

2)Changed JS:

(function($) {   
Drupal.behaviors.dlinkQuicktabs = {
  attach: function (context, settings) {
    $('a.dlink:not(.dlink-processed)', context).addClass('dlink-processed').each(function(){
    $(this).unbind('click').bind('click',dlinkQuicktabsClick);
    });
  }
}
var dlinkQuicktabsClick = function() {
  var tid = this.id.substring(this.id.indexOf('-')+1);
  $('#'+tid).trigger('click');
  return false;
}
})(jQuery);

3) Here we use a theme function which outputs the classic Quicktabs style. If you load other style you need to change the function. Or load the javascript appropriately.

function YOUR_THEME_qt_quicktabs($variables) {
  drupal_add_js(drupal_get_path('theme','YOUR_THEME').'/js/quicktabs_dlink.js');
  return theme_qt_quicktabs($variables);
}

Hope that helped someone.

forantonio@yandex.ru’s picture

forantonio@yandex.ru commented

Hello guys!!!

I'm trying to improve quick tab modul by using direct link.... and I have no idea where I need to input the code

print (l(
  t('Click here for second tab')
  ,$_GET['q']
  ,array(
    'query' => array(
      'quicktabs_1' => '1'
    )
    ,'fragment' => 'quicktabs-1'
    ,'attributes' => array(
      'class' => array('dlink')  // here we edit class to become arrray
      ,'id'    => 'dlink-quicktabs-tab-1-1'  // this is a concatenation of keyword 'dlink' and the ID of the second tab
    )
  )
));

Thanks for any help!!!

bellagio’s picture

bellagio commented

I tested this, but it doesn't work for me. i'm using quicktabs 6.x-2.1.

1. when 'Click here for second tab' is first clicked, it adds url to address bar. (http://....mypage?quicktabs_1=1#quicktabs-1)
and my second tab shows, which is what i want.
2. And then i click my 1st tab, url stays the same.(http://....mypage?quicktabs_1=1#quicktabs-1)
3. Then i click 'Click here for second tab' link again url is the same, and my tab stays at the 1st tab not second tab.
4. I refresh the page, then second tab shows.