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

<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&开发者_开发百科gt;

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

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!

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;

});

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.

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:

<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="wrap">

    <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 cdsfdfontent</h2>

        <p>Some contesdfdsfsdfant</p>

        </div>
</div>

</div>

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!

You could pass a parameter to the webpage via GET.

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

then for example (using php)

<?php
$tab = $_REQUEST['tab'];
?>

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

var default_id = <?php echo $tab; ?>
$("#"+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

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

<script>
$(document).ready(function(){
    $.tabs('#tabs a');
    $('#tabs a[tab=\'' + window.location.hash + '\']').trigger('click');
});
</script>

<div id="tabs" class="htabs">
    <a tab="#tab_general">General</a>
    <a tab="#tab_other">Other</a>
</div>
<div id="tab_general">
    Tab 1 here
</div>
<div id="tab_other">
    Tab 2 here
</div>

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.