Jquery Ui Tabs当前容器显示问题

时间:2013-05-21 08:57:14

标签: jquery html css jquery-ui

首先请访问我的小提琴:http://jsfiddle.net/VsqQ3/

目前默认显示前三个标签(tab 1tab 2tab 3),当我点击next>tab 4时,正在显示tab 5tab 6

我想要的内容:我希望默认显示tab 4tab 5tab 6。我怎么能得到它?

$(".wrapper #tab1,.wrapper #tab2").tabs({active: 0}).tabs({
            collapsible: false,
            hide: {
                    effect: "slideUp",
                    duration: 20
            },
            show: {
                    effect: "slideDown",
                    duration: 200
            }
    });

    var all = $('.wrapper .main').addClass("passiv");
    var prev = $('.wrapper .prev');
    var next = $('.wrapper .next');
    var tab_count = all.length-1;
    var currentContainer = -1;

    prev.click(function(e) {
        e.preventDefault();   

        if (currentContainer != 0) {
            currentContainer -= 1;
            ctrlcontent(currentContainer);
        }
    });

    next.click(function(e) {
        e.preventDefault();

        if (currentContainer < tab_count) {
            currentContainer += 1;
            ctrlcontent(currentContainer);
        }
    }).trigger('click');

    function ctrlcontent(index_to_show) {
       all.removeClass("active").addClass("passiv");
       all.eq(index_to_show).removeClass("passiv").addClass("active");

       if (index_to_show == 0) prev.hide();
       if (index_to_show == tab_count) next.hide();
       if (index_to_show > 0) prev.show();
       if (index_to_show < tab_count) next.show();
    }


    $(function() {
            $( ".wrapper .inner" ).buttonset();
    });

2 个答案:

答案 0 :(得分:1)

如果您查找以下行:

    var currentContainer = -1;

您可以将其更改为

    var currentContainer = Math.floor(all.length / 2) - 1; // -1 needed as your indexing seems to start at -1 rather than 0

它应该始终在中间容器上启动

http://jsfiddle.net/VsqQ3/5/

答案 1 :(得分:1)

只需将next.click();添加到您的代码中:)

jsFiddle

最后3个标签的

next.click().click();:)

jsFiddle