0

好的，所以我有一组选项卡，单击它们时会更改主要内容区域中的内容。这就是这里的代码：

var $items = $('.itembox');
$items.click(function() {
    $items.removeClass('current');
    $(this).addClass('current');

    var index = $items.index($(this));
    $('.currentbox').hide().eq(index).show();


}).eq(0).click();

但是，我也有一个后退/*forward* 按钮可以在选项卡之间切换，但我不确定如何实现这些按钮以及如何使用这些选项卡。

任何帮助将不胜感激！

4

2 回答 2

0

这是一个概念证明，可以帮助您入门。如果您在最后一个选项卡上并按下一步，它将转到第一个选项卡。

http://jsfiddle.net/AraYd/1/

一些重要的代码：

   $('#next').click(function(){
     if(index+1 <= $items.length-1) {
        $items[index+1].click(); 
     } else {
       $items[0].click();   
     }
});

   $('#prev').click(function(){
     if(index-1 >= 0) {
   $items[index-1].click(); 
     } else {
     $items[$items.length-1].click();   
     }
});
于 2013-01-25T22:34:18.680 回答
0

这是另一种方式，存储当前（奖励是单击第一个上的“返回”，将您带到最后一个），并且您始终可以从按钮查询数据:)

 var $items = $('.itembox');
 $items.click(function () {
     $items.removeClass('current');
     $(this).addClass('current');
     var index = $items.index($(this));
     $('#back').data("currentIndex", index - 1);
     $('#forw').data("currentIndex", index + 1);
     $('.currentBox').hide().eq($(this).index()).show();
 }).eq(0).click();
 $('#back, #forw').click(function () {
     $items.eq($(this).data("currentIndex")).click();
 });

工作样本：http: //jsfiddle.net/gXpa3/

于 2013-01-25T22:52:10.637 回答