views:

43

answers:

4

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

A: 

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.

Anthony Mills
Note: you can also make it something like `index.html#voters` and check `window.location.hash` for `"#voters"`. It all depends on whether you want the browser to consider it a "separate page" ... if it is, use `?`. If it isn't, use `#`.
Anthony Mills
+4  A: 

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!

Matt Ball
This will work with the URL provided in the question. +1
patrick dw
Thanks! I guess this sounds like exactly what I'm looking for. Unfortunately I'm more of a designer/HTML+CSS only person, so I don't have the slightest clue how to implement this in real life. It would be so much appreciated you or someone could explain this more in detail (or help with the final script).
klavina
@klavina - the ~2 lines of code are posted should be all you need! In fact, you can get away with just adding the following line of code to the end of your document ready handler: `$(window.location.hash).click();` - at any rate, I'll copypasta your code into my answer to provide a complete code snippet.
Matt Ball
Hmm, but it doesn't work; example: http://projects.klavina.com/tabs/tabs.html#h-02 should link to 2nd tab (Top Commenters) text Link to here, but it just opens the default tab (Top Voters). What am I doing wrong?
klavina
@klavina - The problem is that the element with ID `h-02` would have to be a child of one of the `li`s in `$("ul.tabs li")` - revising now.
Matt Ball
@klavina - see my update. Should work now.
Matt Ball
It worked! Thanks a lot :)
klavina
A: 

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

KennyCason
A: 

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!

Amit
Thanks, but it doesn't seem to work..The link I would need to get working would be http://projects.klavina.com/tabs/tabs2.html#h-02 - should link to 2nd tab (Top Commenters) text Link to here, but it just opens the default tab (Top Voters) + and also loses the "active" class for the tab link..
klavina