如何使用Jquery在html中创建带有输入[type=“radio”]的选项卡？

<script src="jquery.min.js"></script>

<ul class="tab-menu">
  <li class="tab-item active">选项卡1</li>
  <li class="tab-item">选项卡2</li>
  <li class="tab-item">选项卡3</li>
</ul>

<div class="tab-content">
  <div class="tab-panel active">选项卡1内容</div>
  <div class="tab-panel">选项卡2内容</div>
  <div class="tab-panel">选项卡3内容</div>
</div>

$(document).ready(function() {
  $('.tab-item').click(function() {
    // 移除所有选项卡的活动状态
    $('.tab-item').removeClass('active');
    $('.tab-panel').removeClass('active');
    
    // 将当前选项卡设置为活动状态
    $(this).addClass('active');
    
    // 显示相应的选项卡内容
    var index = $(this).index();
    $('.tab-panel').eq(index).addClass('active');
  });
});

.tab-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-item {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-item.active {
  background-color: #f00;
}

.tab-content {
  display: none;
}

.tab-content .active {
  display: block;
}