如何在单击选项卡时更改占位符文本

<ul class="tab-container">
  <li id="tab1">选项卡1</li>
  <li id="tab2">选项卡2</li>
  <li id="tab3">选项卡3</li>
</ul>

<div id="content1" class="tab-content">
  <input type="text" placeholder="选项卡1的占位符文本">
</div>

<div id="content2" class="tab-content">
  <input type="text" placeholder="选项卡2的占位符文本">
</div>

<div id="content3" class="tab-content">
  <input type="text" placeholder="选项卡3的占位符文本">
</div>

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

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

.tab-content {
  display: none;
}

.tab-content input {
  width: 200px;
  height: 30px;
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.active {
  background-color: #f00;
  color: #fff;
}

.show {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有选项卡和占位符文本区域
  var tabs = document.querySelectorAll('.tab-container li');
  var contents = document.querySelectorAll('.tab-content');

  // 设置默认选项卡和占位符文本
  tabs[0].classList.add('active');
  contents[0].classList.add('show');

  // 为每个选项卡添加点击事件监听器
  tabs.forEach(function(tab, index) {
    tab.addEventListener('click', function() {
      // 切换选项卡样式
      tabs.forEach(function(tab) {
        tab.classList.remove('active');
      });
      tab.classList.add('active');

      // 切换占位符文本区域的显示和隐藏
      contents.forEach(function(content) {
        content.classList.remove('show');
      });
      contents[index].classList.add('show');
    });
  });
});