如何让下一步按钮在jquery中的选项卡中循环显示？

<ul class="tabs">
  <li class="tab">选项卡1</li>
  <li class="tab">选项卡2</li>
  <li class="tab">选项卡3</li>
</ul>

<div class="tab-content">内容区域1</div>
<div class="tab-content">内容区域2</div>
<div class="tab-content">内容区域3</div>

<button class="next-btn">下一步</button>

$(document).ready(function() {
  $('.next-btn').click(function(event) {
    event.preventDefault();
    
    var currentTab = $('.tab.active');
    var nextTab = currentTab.next('.tab');
    
    if (nextTab.length === 0) {
      nextTab = $('.tab:first');
    }
    
    currentTab.removeClass('active');
    nextTab.addClass('active');
    
    var currentContent = $('.tab-content:visible');
    var nextContent = currentContent.next('.tab-content');
    
    if (nextContent.length === 0) {
      nextContent = $('.tab-content:first');
    }
    
    currentContent.hide();
    nextContent.show();
  });
});