如何為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();
        }
});