如何仅更改此单选按钮更改此div选项卡

<div class="tabs">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">选项卡1</label>
  
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">选项卡2</label>
  
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">选项卡3</label>
  
  <div class="tab-content" id="content1">
    <!-- 选项卡1的内容 -->
  </div>
  
  <div class="tab-content" id="content2">
    <!-- 选项卡2的内容 -->
  </div>
  
  <div class="tab-content" id="content3">
    <!-- 选项卡3的内容 -->
  </div>
</div>

.tabs {
  /* 样式设置 */
}

.tab-content {
  display: none;
}

input[type="radio"]:checked + label {
  /* 选中状态的样式设置 */
}

input[type="radio"]:checked ~ .tab-content {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {
  var tabs = document.querySelectorAll('.tabs input[type="radio"]');
  
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('change', function() {
      var contentId = this.getAttribute('id').replace('tab', 'content');
      var content = document.getElementById(contentId);
      
      var activeContents = document.querySelectorAll('.tab-content.active');
      for (var j = 0; j < activeContents.length; j++) {
        activeContents[j].classList.remove('active');
      }
      
      content.classList.add('active');
    });
  }
});