Last updated January 5, 2011. Created by incaic on January 5, 2011.
Log in to edit this page.
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:
<?php
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:
<?php
<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.
<?php
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
JavaScript file appears to
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(){For Drupal 7
1) A minor edit is needed for the class to become an array:
<?phpprint (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.
<?phpfunction 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.
Does this work?
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.