Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
169
rated 0 times [  170] [ 1]  / answers: 1 / hits: 19724  / 14 Years ago, mon, august 30, 2010, 12:00:00

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):



<div id=tabs>

<ul class=tabs>
<li><a href=#tabs-voters>Top Voters</a></li>
<li><a href=#tabs-commenters>Top Commenters</a></li>
</ul>

<div id=tabs-voters class=tab-content>

<p id=h1-01>Tab content</p>

<p>Some content</p>

</div>

<div id=tabs-commenters class=tab-content>

<h2 id=h-02>Tab content</h2>

<p>Some content</p>

<h2 id=h-03>Tab content</h2>

<p>Some content</p>

</div>

</div>


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! :)


More From » jquery

 Answers
35

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:



$(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;
});

$(window.location.hash).click(); // super-simple, no? :)
});​





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:



$(document).ready(function() {
var $tabContent = $(.tab-content),
$tabs = $(ul.tabs li),
tabId;

$tabContent.hide();
$(ul.tabs li:first).addClass(active).show();
$tabContent.first().show();

$tabs.click(function() {
var $this = $(this);
$tabs.removeClass(active);
$this.addClass(active);
$tabContent.hide();
var activeTab = $this.find(a).attr(href);
$(activeTab).show();
return false;
});

// Grab the ID of the .tab-content that the hash is referring to
tabId = $(window.location.hash).closest('.tab-content').attr('id');

// Find the anchor element to click, and click it
$tabs.find('a[href=#' + tabId + ']').click();
});​


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!


[#95759] Friday, August 27, 2010, 14 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
maxinec

Total Points: 117
Total Questions: 116
Total Answers: 116

Location: Bangladesh
Member since Sat, Jan 23, 2021
3 Years ago
maxinec questions
;