点击一个按钮切换两个按钮可见性的实现方法

以下是无第三方依赖的原生实现，可直接复用： #

1. 基础实现（直接操作行内样式） #

HTML结构 #

初始默认ON按钮显示，OFF按钮隐藏：

<button id="onBtn" style="display: inline-block;">ON</button>
<button id="offBtn" style="display: none;">OFF</button>

JS逻辑 #

将代码放在页面body标签末尾，或DOMContentLoaded事件回调中即可：

// 获取DOM节点
const onBtn = document.getElementById('onBtn');
const offBtn = document.getElementById('offBtn');

// 绑定点击事件
onBtn.addEventListener('click', () => {
  onBtn.style.display = 'none';
  offBtn.style.display = 'inline-block';
});

offBtn.addEventListener('click', () => {
  offBtn.style.display = 'none';
  onBtn.style.display = 'inline-block';
});

2. 优化版本（通过CSS类控制，更易维护） #

推荐使用该方案，样式和逻辑分离，后续修改更方便：

CSS代码 #

.hidden {
  display: none !important;
}

HTML结构 #

<button id="onBtn">ON</button>
<button id="offBtn" class="hidden">OFF</button>

JS逻辑 #

const onBtn = document.getElementById('onBtn');
const offBtn = document.getElementById('offBtn');

// 抽离公共切换逻辑
const toggleButtonVisibility = () => {
  onBtn.classList.toggle('hidden');
  offBtn.classList.toggle('hidden');
};

// 给两个按钮绑定同一个切换方法
onBtn.addEventListener('click', toggleButtonVisibility);
offBtn.addEventListener('click', toggleButtonVisibility);

如果你使用Vue、React等前端框架，不需要直接操作DOM，直接绑定响应式布尔变量控制显示即可：比如绑定同一个变量isOn，ON按钮在isOn = true时显示，OFF按钮在isOn = false时显示，点击时直接修改isOn = !isOn就能实现切换。

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