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

How to add Next/Previous buttons for JS Tabs

本文关键字：按钮 一步 下一步 JS 选项 添加      更新时间：2023-09-26

我想为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>

我们已经为您的代码尝试了下一个previous按钮查看这个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();
        }
});
相关文章：