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 =)
Eureka! 
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
LikeLike
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
LikeLike
any Idea why my pages are loading like there were no header when I try and use a direct link?
http://nmsea.org/sun/get-involved?quicktabs_get_involved=2#quicktabs-get_involved
Notice the difference
http://nmsea.org/sun/get-involved
Thanks
LikeLike
can it be fixed if you disable the ajax feature?
LikeLike
No, just checked, also cleared the cache, just in case.
Thanks
LikeLike
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?
LikeLike
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
LikeLike
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?
LikeLike
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
LikeLike
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.
LikeLike
Ok, that works, thank you very much for you time.
LikeLike
great. =)
LikeLike
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
LikeLike
Thanks for your info. i think it could help other readers if they meet similar situation. =)
LikeLike