如何使用上一步和下一步按钮切换片段？

<div id="fragment1" class="fragment">片段1内容</div>
<div id="fragment2" class="fragment">片段2内容</div>
<div id="fragment3" class="fragment">片段3内容</div>

<button id="prevButton">上一步</button>
<button id="nextButton">下一步</button>

.fragment {
  display: none;
}

// 获取片段元素和按钮元素
var fragments = document.getElementsByClassName('fragment');
var prevButton = document.getElementById('prevButton');
var nextButton = document.getElementById('nextButton');

// 当前显示的片段索引
var currentFragmentIndex = 0;

// 显示指定索引的片段
function showFragment(index) {
  fragments[index].style.display = 'block';
}

// 隐藏指定索引的片段
function hideFragment(index) {
  fragments[index].style.display = 'none';
}

// 上一步按钮点击事件处理函数
prevButton.addEventListener('click', function() {
  hideFragment(currentFragmentIndex);
  currentFragmentIndex = Math.max(0, currentFragmentIndex - 1);
  showFragment(currentFragmentIndex);
});

// 下一步按钮点击事件处理函数
nextButton.addEventListener('click', function() {
  hideFragment(currentFragmentIndex);
  currentFragmentIndex = Math.min(fragments.length - 1, currentFragmentIndex + 1);
  showFragment(currentFragmentIndex);
});

// 初始化显示第一个片段
showFragment(currentFragmentIndex);