如何为JS选项卡添加下一个/前一个按钮

Question

我想为JS选项卡添加下一个/以前的按钮，这样用户就可以使用这些按钮转到next选项卡。另外，我希望前一个按钮只在打开第二个选项卡时出现，当打开最后一个选项卡时下一个按钮消失。我怎么能这么做？

​

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
});

    #tab-1 {
      display: block;
    }
    .tab-content {
      display: none;
      overflow: hidden;
    }

 <ul class="tabs-menu" class="articles">
  <li class="current"><a href="#tab-1">tab 1</a>
  </li>
  <li><a href="#tab-2">tab 2</a>
  </li>
  <li><a href="#tab-3">tab 3</a>
  </li>
  <li><a href="#tab-4">tab 4</a>
  </li>
</ul>
<div class="tab">
  <div id="tab-1" class="tab-content">Content 1</div>
  <div id="tab-2" class="tab-content">Content 2</div>
  <div id="tab-3" class="tab-content">Content 3</div>
  <div id="tab-4" class="tab-content">Content 4</div>
</div>

​

Answer 1

我们已经为您的代码尝试了下一个按钮，检查这个小提琴链接

$('#nex').on('click',function(){
     if(count<4)
        {
    $('.tab-content').hide()
    count++;
    $('#tab-'+count).show();
    if(count>1)
        $('#pre').show();
    else
        $('#pre').hide();
        }
});

    $('#pre').on('click',function(){
        if(count>1)
        {
    $('.tab-content').hide()
    count--;
    $('#tab-'+count).show();
    if(count<4)
        $('#nex').show();
    else
        $('#nex').hide();
        }
});