javascript - 使用jQuery滚动div

我有一个<div>，分为3个<div>。这些div中的两个被当作上一个和下一个按钮，分别具有ID prev和next。底部排列了3个ID为<div>，diva和divb的divc。 divb和divc的宽度为0，因此它们被隐藏，只有diva可见。我想隐藏diva以隐藏（将宽度设置为0），并且在用户单击divb时显示id=next，如果再次单击该按钮，我希望divb隐藏并显示divc。如果单击id=prev，我也希望这种情况反向发生。

下面是我要说的图像；



Here是小提琴。

最佳答案

我使用类来实现您所需要的。在这里检查DEMO

完整代码：

var $pages = $('.page');
$('#nxt').click(
  function() {
    var $cur = $('.active');       //get current active
    var $next = $cur.next();       //get next to cur

    /*
     * Add logic inside below if condition for going
     * back to first div.
    */
    if ($next.length == 0) return; //if nothing in next, return.

    $cur.removeClass('active');    //remove active class from cur active
    $next.addClass('active');      //add next as current active

    //animate everything except .active (which is next)
    $('.page').not('.active').animate({"width": 0}, "slow");

    //animate cur (which was next)
    $('.active').animate({"width": 200}, "slow");
});

$('#prev').click(
  function() {
    var $cur = $('.active');
    var $prev = $cur.prev('.page');

    if ($prev.length == 0) return;

    $cur.removeClass('active');
    $prev.addClass('active');

    $('.page').not('.active').animate({"width": 0}, "slow");
    $('.active').animate({"width": 200}, "slow");
});