根据箭头更改多个div

Question

我创建了一个输入部分，供用户编写自己的作品。 我在此侧有多个div，我想从可以单击的左右箭头更改div。

$(document).ready(function() {
  $('.menubody:nth-child(1)').show('slow');
  $('.menubody:nth-child(1)').hide('slow');
  $('.fa-caret-right').on({
    click: function() {
      var i = $('.menubody:visible').index();
      var len = $('.menubody').length;
      var next;
      if (i >= 0) {
        if (i == len - 1) {
          next = $('.menubody:eq(0)');
        } else {
          next = $('.menubody:eq(' + (i + 1) + ')');
        }
        $('.menubody:visible').hide();
        $(next).show();
      }
    }
  });
});

编辑：

我有一个有效的示例（请参阅小提琴 ），当按“ right”键时可以更改和更改内容。

如何使“左” div将内容移至上一个？ 并添加多个内容区域以进行更改？

有关用法的示例布局（不适用于jQuery），请参见此处 。

Answer 1

我认为您应该在这里使用nth-child（）jQuery选择器。 只需在每次单击右按钮时增加n的值，并在每次单击左箭头时减小n的值。

$('#left-arrow').on('click', function(){
  var i++; 
  $('main-div:nth-child(i-1)').hide();
  $('main-div:nth-child(i)').show();
})   

这是更多信息的链接： W3 Schools：nth-​​child（）选择器

Answer 2

使用jQuery的.prev()和.next() 。 如果他们返回零长度的收集，使用.last()和.first()而不是循环使用您的内容（不知道你需要这一点）。

 $(function() { $('.tabs-container div').not(':first-child').hide(); $('#tabs li a').click(function() { var $clickedLink = $(this), $visible = $('.tabs-container div:visible'); $visible.each(function(){ var $this = $(this), $parentContainer = $this.parents('.tabs-container').eq(0), $toShow; if( $clickedLink.is('.prev') ){ $toShow = $this.prev('div').length ? $this.prev('div') : $('div', $parentContainer).last(); } else { $toShow = $this.next('div').length ? $this.next('div') : $('div', $parentContainer).first(); } $this.hide(); $toShow.show(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul id="tabs"> <li><a href="#" class="prev">Left Arrrow</a> </li> <li><a href="#" class="next">Right Arrow</a> </li> </ul> <div class="tabs-container"> <div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div> <div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div> <div id="content3">Content for link 3. Should display only when Link 3 is clicked.</div> <div id="content4">Content for link 4. Should display only when Link 4 is clicked.</div> </div> <p>Unrelated text is here. Text in this area is static and should display at all times.</p> <div class="tabs-container"> <div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div> <div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div> </div> <p>More unrelated text</p> <div class="tabs-container"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> </div>