Javascript :在选项卡键导航上显示select元素的内容

<ul class="tab-navigation">
  <li class="tab">Tab 1</li>
  <li class="tab">Tab 2</li>
  <li class="tab">Tab 3</li>
</ul>

<div class="tab-content">
  <select id="select1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  
  <select id="select2">
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
  </select>
  
  <select id="select3">
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
  </select>
</div>

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

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

.tab-content {
  display: none;
}

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

// 获取选项卡导航和内容区域的元素
var tabs = document.getElementsByClassName('tab');
var tabContents = document.getElementsByClassName('tab-content');

// 给选项卡导航添加点击事件
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    // 移除所有选项卡的active类
    for (var j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove('active');
      tabContents[j].classList.remove('active');
    }
    
    // 添加当前选项卡和对应内容区域的active类
    this.classList.add('active');
    var tabId = this.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  });
}