如何在选项卡布局中使用自定义对话框中的单击响应来更改选项卡

<div class="tab-layout">
  <div class="tab" onclick="openDialog(1)">选项卡1</div>
  <div class="tab" onclick="openDialog(2)">选项卡2</div>
  <div class="tab" onclick="openDialog(3)">选项卡3</div>
</div>

<div id="dialog" class="dialog">
  <div class="dialog-content">
    <h2>自定义对话框</h2>
    <p>对话框内容</p>
    <button onclick="changeTabContent()">更改选项卡内容</button>
  </div>
</div>

<div class="tab-content">
  <div id="tab1" class="tab-pane">选项卡1的内容</div>
  <div id="tab2" class="tab-pane">选项卡2的内容</div>
  <div id="tab3" class="tab-pane">选项卡3的内容</div>
</div>

.tab-layout {
  display: flex;
}

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

.dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
}

.tab-content {
  margin-top: 20px;
}

.tab-pane {
  display: none;
}

function openDialog(tabIndex) {
  var dialog = document.getElementById("dialog");
  dialog.style.display = "block";
  dialog.dataset.tabIndex = tabIndex;
}

function changeTabContent() {
  var dialog = document.getElementById("dialog");
  var tabIndex = dialog.dataset.tabIndex;
  var tabContent = document.getElementById("tab" + tabIndex);
  var newContent = "更改后的内容";
  tabContent.innerHTML = newContent;
  dialog.style.display = "none";
}