如何用JavaScript实现Tailwind CSS按钮的ID切换功能

现有代码的问题 #

• 变量作用域错误：target变量在aboutButton函数内部声明，外部调用target.addEventListener时会报错，因为外部无法访问该变量
• 需求匹配错误：你需要切换的是按钮的ID，但代码中使用了classList.toggle操作CSS类，完全偏离需求
• 缺失页面切换逻辑：没有处理点击按钮后切换页面内容的逻辑

修正后的完整实现 #

HTML 代码（包含原按钮与新增页面内容）

<!-- 初始按钮 -->
<button id="btnAbt" class="absolute -ml-11 top-1/2 transform -translate-y-1/2 rotate-90 max-w-[160px] p-2 border-2 border-black rounded-lg font-bold shadow-2xl text-white text-2xl bg-cyan">
  About Me
</button>

<!-- 新增的页面内容容器，初始隐藏 -->
<div id="aboutPageContent" class="hidden w-full h-full">
  <!-- 这里填充你的新页面内容 -->
  <h2 class="text-3xl font-bold">关于我</h2>
  <p>这里是关于我的详细介绍内容</p>
</div>

JavaScript 代码

// 提前获取DOM元素，避免重复查询
const toggleBtn = document.getElementById('btnAbt');
const aboutContent = document.getElementById('aboutPageContent');

function handleButtonClick() {
  // 切换按钮ID
  toggleBtn.id = toggleBtn.id === 'btnAbt' ? 'newAbt' : 'btnAbt';
  
  // 切换页面内容显示状态（保持页面尺寸不变）
  aboutContent.classList.toggle('hidden');
}

// 绑定点击事件
toggleBtn.addEventListener('click', handleButtonClick);

关键逻辑说明 #

1. ID切换逻辑：ID没有原生的toggle方法，通过判断当前ID值，使用三元运算符实现双向切换
2. 页面内容切换：利用Tailwind的hidden类控制新增内容容器的显示/隐藏，既满足"切换到另一页面"的需求，又能保持页面尺寸不变
3. 性能优化：在函数外部提前获取DOM元素，避免每次点击都重新查询DOM树，提升执行效率

内容的提问来源于stack exchange，提问作者Diksha Varshney