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

Question

我想为 JS 标签添加 Next/Previous 按钮，以便用户可以使用这些按钮转到下一个标签。另外，我希望上一个按钮仅在第二个选项卡打开时出现，下一个按钮在最后一个选项卡打开时消失。我该怎么做？

$(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

我们已经为您的代码尝试了下一个上一个按钮 检查这个jsfiddle链接

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