CODEWITHSUNDEEP
javascriptjqueryhtmltabs
Poochi Teap
Poochi Teap

Reputation: 71

Link to a specific tab for jquery tabs

http://jsfiddle.net/78QPs/

This is the Javascript

$(document).ready(function() {

$(".tab_content").hide();
$(".tab_content:first").show(); 

$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("rel"); 
    $("#"+activeTab).fadeIn(); 
});

});

I have used the above to make my tabs but I want to link to tabs2 & tab3 in my above example from another webpage using a href. Any other way other than using Jquery UI like javascript?

In short, How do I create a link to a tab directly from another page and within the page from the above example?

Upvotes: 2

Views: 323

Answers (3)

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

I guess that is 1) Listen for the Hash, and 2) trigger the click of the relevant 'tab'.

Now Im not 100% on the support for this event listener from jquery - but I'll add it it.

   /* listen for the anchor hashtag change */
    $(window).on('hashchange', function() {
     /* trigger the click of the tab with the matching rel */
     var _rel =  document.location.hash.
      $("li[rel="+_rel.substring(1)+"]").click();
     });

Or use this listener of sorts which is native, ( I use it but I might need to update to the above if it works out ).

var _currhash;

 function anchorWatch() {
  if(document.location.hash.length>0) {
    /* only run if 'hash' has changed */
     if(_currhash!==document.location.hash) {
       _currhash = document.location.hash;

          $("li[rel="+ _currhash.substring(1)+"]").click();

     }
   }
 } 
 setInterval(anchorWatch,300);

Here is a demo and code of something I added on another q that could be relevant : - http://jsbin.com/soqopepe/1/edit

*( not using jquery tabs), but works in the same way *

Here is a demo of your code with this added :

http://jsfiddle.net/sa2Lj/

To try, http://jsfiddle.net/sa2Lj/show/#tab3

Upvotes: 1

Nice-Guy
Nice-Guy

Reputation: 1524

for the most cross-browser compatible solution ty something like this:

var queryString = {};
window.location.href.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function($0, $1, $2, $3) { queryString[$1] = $3; }
);

if (queryString[base.options.param]) {

var tab = $("a[href='#" + queryString[base.options.param] + "']");

tab
    .closest(".tab_content")
    .find("a")
    .removeClass("active")
    .end()
    .next(".list-wrap")
    .find("ul")
    .hide();
tab.addClass("current");
$("#" + queryString[base.options.param]).show();

};

this assigns each tab a query string parameter value.

Upvotes: 0

Giancarlo PSK
Giancarlo PSK

Reputation: 231

You have various options: use a hash inside your url to reference the id of your tab, and retrieve it with window.location.hash.

So let's say you have a tab with id='tab' and window.location.hash = 'tab', you can do $(window.location.hash).hide().

Another good option would be using the HTML5 history function to change the URL accordingly to the tab selected. This would also be more much nicer, I guess.

Upvotes: 0

Related Questions