Jquery选项卡,从选项卡内的链接打开选项卡

时间:2012-06-27 02:06:52

标签: jquery tabs

我正在使用jquery选项卡显示一些内容,我需要在选项卡中创建一个链接以打开另一个选项卡,我的jquery知识非常有限,所以我发布了我的代码,所以你可以检查看看我是什么可以吗?

这是jquery代码:

$(document).ready(function() {
    //$(".tab_content").hide(); 
    $(".tab_content").css({
        'display':'block',
        'position':'absolute',
        'top':'-999em',
        'left':'-999em'
    });
    //$(".tab_content:first").show(); 
    $(".tab_content:first").css({
        'top':'350px',
        'left':'50px',
        'width':'660px'
    });
    firstTabHeight = $(".tab_content:first").height();
    $(".tab_content:first").parent().css('height',firstTabHeight);

    $("#nav-portfolio ul li").click(function() {
        $("#nav-portfolio ul li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        //$(".tab_content").hide(); //Hide all tab content
        $(".tab_content").css({
            'display':'block',
            'position':'absolute',
            'top':'-999em',
            'left':'-999em'
        });

        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).hide(); 
        //$(".tab_content").css({
        //  'opacity':'0',
        //});
        //var tabHeight = $(activeTab).height();
        //$('#colLeft').height(tabHeight);
        $(activeTab).fadeIn(); //Fade in the active content
        thisTabHeight = $(activeTab).height();
        $(activeTab).css({
            'display':'block',
            'position':'relative',
            'top':'0',
            'left':'0',
            'width':'660px'
        });
    activeTabHeight = $(activeTab).height();
    $(".tab_content:first").parent().css('height',activeTabHeight);

   return false;

    });

1 个答案:

答案 0 :(得分:0)

将单击功能绑定到选项卡内的链接,以调用要转到的选项卡的单击功能。例如,如果您希望链接触发第二个选项卡:

$('#this_is_the_link').click(function(e) {
    e.preventDefault(); //stop the normal link function from happening
    $("#nav-portfolio ul li:nth-child(2)").click() // call click event on the second tab
});