如何实现点击按钮时切换按钮内部文本？已尝试:hover但无效

你用:hover伪类只能实现鼠标悬停时的临时变化，要实现点击后持久切换文本，需要结合JavaScript来处理点击事件，以下是几种实用方案：

方法1：JavaScript直接判断切换文本 #

这种方式适合简单的文本切换逻辑，直接在JS里判断当前文本并切换：

<button id="toggleBtn">点击切换</button>

<script>
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', function() {
  // 对比当前文本，切换为对应目标文本
  this.textContent = this.textContent === '点击切换' ? '已切换状态' : '点击切换';
});
</script>

方法2：利用data属性存储切换文本（更灵活） #

把要切换的文本存在按钮的自定义属性里，不用修改JS代码就能调整文本内容：

<button id="toggleBtn" data-original="点我切换" data-toggled="切换完成">点我切换</button>

<script>
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', function() {
  const originalText = this.dataset.original;
  const toggledText = this.dataset.toggled;
  this.textContent = this.textContent === originalText ? toggledText : originalText;
});
</script>

方法3：CSS配合JavaScript切换复杂内容 #

如果切换的内容包含HTML标签或样式，用这种方式更方便：

<button id="toggleBtn" class="show-original">
  <span class="content">初始文本</span>
  <span class="content">切换后<span style="color:red;">带样式</span>的文本</span>
</button>

<style>
#toggleBtn .content:nth-child(2) {
  display: none;
}
#toggleBtn.show-toggled .content:nth-child(1) {
  display: none;
}
#toggleBtn.show-toggled .content:nth-child(2) {
  display: inline;
}
</style>

<script>
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', function() {
  this.classList.toggle('show-toggled');
});
</script>

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