通过jQuery链接到特定选项卡

Question

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!

Answer 1

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