如何为JS标签添加下一个/上一个按钮

Question

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

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