CODEWITHSUNDEEP
javascriptjquerytabs
restard
restard

Reputation: 33

link to a specific tab by jquery

I need your help!

I have a tab function by jquery in my site. and it works well.

Here is a javascript in < head >

<script type="text/javascript">
// When the document loads do everything inside here ...
$(document).ready(function(){
    // When a link is clicked
    $("a.tab").click(function () {
    // switch all tabs off
    $(".active").removeClass("active");
    // switch this tab on
    $(this).addClass("active");
    // slide all content up
    $(".content").slideUp();
    // slide this content up
    var content_show = $(this).attr("title");
    $("#"+content_show).slideDown();
    });
});
</script>

and html sources are here!

<ul id="tabs">
    <li><a href="#" title="type1" class="tab active">type1</a></li>
    <li><a href="#" title="type2" class="tab">type2</a></li>
</ul>
<section id="type1" class="content">
    <p>contents1contents1contents1contents1contents1</p>
</section>
<section id="type2" class="content content_2">
    <p>contents2contents2contents2contents2</p>
</section>

But i need to link a button to a specific tab. there is the button in a category archive page, and when users click the button, the page opens with the contents in the second tab, id named "type2".

above sources are referred to by this page and here is the page that i'm working on.

i'm waiting for your advices!

Upvotes: 1

Views: 1337

Answers (1)

Abdullah Jibaly
Abdullah Jibaly

Reputation: 54830

Assuming your html file above is named index.html, you can create a link like:

<a href="index.html#!type2">click</a>

Then:

$(document).ready(function(){
    function doTab() {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $(".content").slideUp();
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    }

    // When a link is clicked
    $("a.tab").click(doTab);

    if (window.location.hash) {
        $('a[title="' + window.location.hash.substring(2) + '"]').click();
    }
});

Upvotes: 1

Related Questions