jQuery tabs: how to create a link to a specific tab?

问题:

I'm using a simple jQuery script for tabs:

The JS:

$(document).ready(function() {      $(".tab-content").hide();     $("ul.tabs li:first").addClass("active").show();     $(".tab-content:first").show();      $("ul.tabs li").click(function() {         $("ul.tabs li").removeClass("active");         $(this).addClass("active");         $(".tab-content").hide();         var activeTab = $(this).find("a").attr("href");         $(activeTab).show();         return false;     });  }); 

The HTML (for the index.html):

      
Top Voters
         
Top Commenters
     
      
Tab content
          
Some content
          
      
          
Tab content
          
Some content
          
Tab content
          
Some content
          
  
 

What I need to do is to create a working link to index.html#h-02, index.html#h-03 etc., but these simple links don't work because the tab is hidden by default. Is it possible to modify the JS, so I can link to a bookmark in tabs that are hidden when opening index.html? Can someone point me in the right direction?

Thanks a lot! :)

回答1:

In your document ready handler, you can examine the value of the fragment and use JavaScript to show the corresponding tab.

$(document).ready(function () {     ...      var tabId = window.location.hash; // will look something like "#h-02"     $(tabId).click(); // after you've bound your click listener }); 

---

Edit as requested:

---

Edit 2:

If you want to be able to specify an ID of a tab content element (like h-02 in the page you linked) then you have to work backwards to get the ID of the corresponding tab to activate it. Like this:

Using $.closest() means that the hash can specify the ID of the .tab-content itself (such as tabs-commenters in your example), or a child thereof.

I've made some other cleanup suggestions as well above. No need to keep re-selecting those DOM elements!

回答2:

nothing seems to work for me:

//Default Action jQuery(".tab_content").hide(); //Hide all content jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab jQuery(".tab_content:first").show(); //Show first tab content  //On Click Event jQuery("ul.tabs li").click(function() {     jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class     jQuery(this).addClass("active"); //Add "active" class to selected tab     jQuery(".tab_content").hide(); //Hide all tab content     var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content     jQuery(activeTab).fadeIn(); //Fade in the active content     return false;  }); 

回答3:

Well, you can make your URL something like http://site.com/index.html?voters and then in the page, you check window.location.search (search being the bit including the question mark). If it's "?voters" then you run the code to select the tab. If it's "?commenters" then you run the code to select that tab. Et cetera.

回答4:

I would try to modify your code a bit. This is how I would do it:

http://jsfiddle.net/RtCnU/8/

This way you accomplish exactly what you wanted.

This is the code that I used:

      
Top Voters
         
Top Commenters
     
      
      
Tab content
          
Some content
          
      
          
Tab cdsfdfontent
          
Some contesdfdsfsdfant
          
 
  
 

and this is the Javascript:

$(document).ready(function() {      $(".tab-content").hide();     $("ul.tabs li a:first").addClass("active").show();     $("#wrap > div").hide().filter(":first").show();      $("ul.tabs li a").click(function() {         $("ul.tabs li > a").removeClass("active");         $(this).addClass("active");         $("#wrap > div").hide();         var activeTab = $(this).attr("href");         $(activeTab).show();         return false;     });  }); 

Let me know how it works out!

回答5:

You could pass a parameter to the webpage via GET.

i.e. www.yourpage.com?tab=tab1

then for example (using php)

then in your JS code, you can do something like:

var default_id =  $("#"+default_id).addClass("active").show(); 

though you should check to make sure the default_id is valid, and if not load a working default(like you already do)

Edit I just noticed the question was wanting to use URLs formated like, www.example.com#h-02 in which you're better off sticking to using JS only

回答6:

This is what I did to get mine to work, based on Matt's answer. I posted this to help others.

     General     Other 
 
     Tab 1 here 
 
     Tab 2 here 
 

回答7:

I like Dan Powers answer, I'm currently using a version of that. I did however, at first, think it wasn't working so I did a alert(window.location.hash) and found out that it included the #. Dan's answer is valid though since he does use # in his tab ids, e.g. tab="#tab_general". So, be aware of this.

If you want to read your hash name without the #, e.g. tab="tab_general", replace:

$('#tabs a[tab=\'' + window.location.hash + '\']').trigger('click'); 

with

$('#tabs a[tab=\'' + window.location.hash.substring(1) + '\']').trigger('click'); 

You can of course also change tab to id or something else.

I haven't figured out how to link to nested tabs though, when e.g. one tab contains a page with sub tabs.

文章来源: jQuery tabs: how to create a link to a specific tab?