Question

我需要隐藏现在的div并显示下一个隐藏这是我的代码

$(document).ready(function() {
  $('#next').click(function() {
    $(this).next().next().children("div").hide();
    $(this).next().next().children("div").show();
  });
});

#div2,
#div3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button id="prev">Prev</button>
<button id="next">Next</button>
<hr />
<div id="main">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
  <div id="div3">Div 3</div>
</div>

DEMO

Answer 1

看看this。使用css类处理开始/结束，保持js简单。

Answer 2

这样的事情怎么样？

$(document).ready(function() { 

  var currentDiv = 0;
  $('#next').click(function() {
    $('#div' + (currentDiv + 1)).hide();
    currentDiv = (currentDiv + 1) % 3;
    $('#div' + (currentDiv + 1)).show();
  });
});

Answer 3

尝试一些不同的东西

$(document).ready(function() { 

    $('#next').click(function() {
          $eL=$('#main').children('div').filter(":visible");
          $('#main').children().hide();
          if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('#main div')[0].show();
          }

    });

    $('#prev').click(function() {
          $eL=$('#main').children('div').filter(":visible");
          $('#main').children().hide();
          if($eL.previous().length>0){
              $eL.previous().show();
          }else{
               $('#main div')[$('#main div').length - 1].show();
          }

    });

});

编辑：此函数假定在页面加载时其中一个子div已经可见。

编辑：添加上一个按钮

Answer 4

这样的事情（下一次和以前的处理）：

.item{
    display:none;
}


var activeItem = 0;

function switchItem(isNext) {

        if (isNext) {
            activeItem++;
        } else {
            activeItem--;
        }

        activeItem = (activeItem == 3) ? 0 : activeItem;
        activeItem = (activeItem == -1) ? 2 : activeItem;

        showItem($("#main"), activeItem);
    }


    function showItem(selector, index) {

        selector.find(".item").hide().eq(index).toggle();
    }

<div id="main">   
    <div id="div1" class="item">Div 1</div>
    <div id="div2" class="item">Div 2</div>
    <div id="div3" class="item">Div 3</div>    
</div>

Answer 5

以下是代码。

<ul class="grid">
   <li class="object">
     List Item 1<a class="show-next"> Show the next list item</a>
   </li>
        <li class="object">
     List Item 2
     <a class="show-next">Show the next list item</a>
   </li>
        <li class="object">
     List Item 3
     <a class="show-next">Show the next list item</a>
   </li>
</ul>

以下是您应插入的脚本。

$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
   $eL = $('.grid .object').filter(":visible");
  //  $(".grid").find(".object").hide().next().show();
    if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('.grid .object')[0].show();
          }
});

jquery：如何显示下一个div并隐藏当前的div

5 个答案: