html＋ts实现点击不同按钮实现相应按钮对应的弹窗

HTML (HyperText Markup Language) 和 TypeScript 是一种结合使用的模式，常用于前端开发中。如果你想通过点击不同的按钮显示对应的不同弹窗，你可以这样做：

首先，在 HTML 中，你需要创建一些按钮，并给它们赋予唯一的`id`属性，以便在JavaScript或TypeScript中引用它们：

<button id="btn1" onclick="showPopup('popup1')">按钮1</button>
<button id="btn2" onclick="showPopup('popup2')">按钮2</button>
<!-- ... 更多按钮... -->

<div id="popup1" class="hidden">弹窗1的内容</div>
<div id="popup2" class="hidden">弹窗2的内容</div>
<!-- ... 更多弹窗... -->

然后，在 TypeScript 文件中，创建一个函数 `showPopup`，接受一个字符串参数表示弹窗的ID，我们可以通过这个ID去切换显示的弹窗：

function showPopup(popUpId: string): void {
  const popups = document.querySelectorAll('.hidden'); // 获取所有隐藏的弹窗
  for (const popup of popups) {
    popup.classList.remove('hidden'); // 取消隐藏状态
  }

  const targetPopup = document.getElementById(popUpId); // 获取特定的弹窗
  if (targetPopup) {
    targetPopup.classList.add('visible'); // 添加显示状态
  }
}

在这个例子中，我们假设每个弹窗都有`.hidden`和`.visible`这两个CSS类，分别代表默认隐藏和显示的状态。当点击按钮时，会先隐藏所有弹窗，然后只显示目标弹窗。