通过复选框打开和关闭选项卡页

<div class="tabs">
  <div id="tab1">选项卡页1的内容</div>
  <div id="tab2">选项卡页2的内容</div>
  <div id="tab3">选项卡页3的内容</div>
</div>

<input type="checkbox" id="checkbox1" value="tab1">
<label for="checkbox1">选项卡1</label>

<input type="checkbox" id="checkbox2" value="tab2">
<label for="checkbox2">选项卡2</label>

<input type="checkbox" id="checkbox3" value="tab3">
<label for="checkbox3">选项卡3</label>

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const tabs = document.querySelectorAll('.tabs > div');

checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('change', () => {
    tabs.forEach((tab) => {
      if (checkbox.checked && checkbox.value === tab.id) {
        tab.style.display = 'block';
      } else {
        tab.style.display = 'none';
      }
    });
  });
});