0

请访问这个小提琴：http: //jsfiddle.net/9Kq66/

我想要什么：当用户查看时，如果前三个选项卡中的任何一个tab 1或tab 2处于tab 3活动状态，则上一个链接将被隐藏，以便没有人可以返回，当最后三个选项卡中的任何一个tab 4或tab 5处于tab 6活动状态时，下一个链接将隐藏起来，让任何人都无法走得更远。我怎么能得到那个？（如果可能，动态）

这是我正在使用的 Jquery 代码：

$(".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 i = -1;

$('.wrapper .prev').click(function(e) {
        e.preventDefault();
        ctrlcontent( i = !i ? all.length - 1 : --i );
});
$('.wrapper .next').click(function(e) {
        e.preventDefault();
        ctrlcontent( i = ++i % all.length );
}).click();

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


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

注意：我是 Jquery Ui 的新手，请尽可能详细回答。

谢谢

4

2 回答 2

1

实际上，您只需对现有代码进行 2 处小的更改：

  • 首先 - 在两个 .click() 处理程序中禁用“循环”功能
  • 第二 - 在 ctrlcontent() 函数中添加一个条件来显示/隐藏下一个/上一个链接

点击处理程序如下所示：

$('.wrapper .prev').click(function(e) {
    e.preventDefault();

    // Remove this line, since this causes the "cycle" effect
    // ctrlcontent( i = !i ? all.length - 1 : --i );

    // Use this logic:
    // When we are on first tab then do nothing, since there is no previous tab
    if (i == 0) {
        // Do not call ctrlcontent, since there is no previous tab
    } else {
        i -= 1;
        ctrlcontent(i);
    }
});

$('.wrapper .next').click(function(e) {
    e.preventDefault();

    // Also remove this line and add the condition below:
    //ctrlcontent( i = ++i % all.length );

    // When we are on the last tab then do nothing, since there is no next tab
    if (i == all.length-1) {
        // Do nothing, since there is no next tab
    } else {
        i += 1;
        ctrlcontent(i);
    }
}).click();

ctrlcontent 函数需要几个条件来决定显示哪些链接：

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

    // now check if we need to show/hide the prev/next links
    if (index_to_show == 0) {
        // We are on first page, so hide the "prev"-link
        prev.hide();
    }

    if (index_to_show == all.length-1) {
        // We are on the last tab, so hide the "next"-link   
        next.hide();
    }

    if (index_to_show > 0) {
        // We are on a tab _after_ the first one, so there should be a "prev"-link
        prev.show();
    }

    if (index_to_show < all.length-1) {
        // We are a tab _before_ the last one, so we need the "next"-link
        next.show();
    }
}

注意：以上示例未进行优化。你可以把它们写得更短。

我的另一句话：您应该将变量“i”重命名为“current_tab”等。它使代码更易于阅读/调试。

这是较短版本中的相同代码：

$(".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 i = -1; // I suggest to call this "current", etc. "i" is no good ides...

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

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

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

    if (i < tab_count) {
        i += 1;
        ctrlcontent(i);
    }
}).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();
});
于 2013-05-19T21:23:43.280 回答
1

这是你可以做的。使用 jquery ui 事件，您可以像这样获取当前选项卡的索引。

var activeIdx = 0; /* probably starting off at the zero index */

当在其单击事件中单击选项卡时，设置上面的 activeIdx。因此，在您的选项卡本身的初始化中添加一个选择事件。

beforeActivate: function(event, ui){
    activeIdx = ui.index
}

if(activeIdx <= 2){
  // hide ur prev button or create a disabled class.
} else {
  // hide ur next btn or add disabled class.
}

所以基本上你所做的就是检查选项卡的选定或活动索引，不管你有什么其他事件和锚点，如果它小于或等于你知道你在第一组选项卡上。说得通？

编辑：您还可以将选项卡设置为变量，例如：

var _tabs = $(".wrapper #tab1,.wrapper #tab2").tabs(); // omit above hide/show for brevity.

然后像这样抓住索引。

activeIdx = _tabs.tabs('option', 'selected');
于 2013-05-19T21:03:23.150 回答