通过jquery链接到特定选项卡 [英] link to a specific tab by jquery

问题描述

我需要你的帮助！

我的网站上有一个jquery的标签功能。它运作良好。

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

这是一个javascript in< head>

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>

和html来源在这里！

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>

但我需要将按钮链接到特定标签。
类别存档页面中有按钮，当用户点击按钮时，页面打开，第二个标签中的内容名为type2。

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".

以上来源是我正在处理的页面。

我在等你的建议！

推荐答案

假设你上面的html文件名为index.html ，您可以创建如下链接：

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

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

然后：

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

这篇关于通过jquery链接到特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！