Question

好的，所以我有一组标签，点击后会更改主要内容区域中的内容。这是这段代码：

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

但是，我还有一个 back / * forward *按钮可以在标签之间进行更改，但我不确定如何实现这些按钮以及使用标签。

非常感谢任何帮助！

Answer 1

这是一个让你入门的概念证明。如果您在最后一个标签页上然后按下一个标签，则会转到第一个标签页。

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

Answer 2

这是另一种方式，存储当前（奖励是点击第一个上的“后退”，带你到最后一个），你总是可以从按钮查询数据：）

 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/

选项卡的后退/前进按钮 - JQuery

2 个答案: