在 HTML 页面的同一位置隐藏和显示按钮

Question

在我的page.php 上，我有 3 个按钮：

<input type="submit" value="Btn 1"  id="btn1">   
<input type="submit" value="Btn 2" id="btn2" onClick="action();>  
<input type="submit" value="Btn 3" id="btn3" onClick="action();>  

第一个 Btn 1 按钮被加载隐藏：

document.getElementById('btn1').style.visibility = 'hidden';

点击Btn 2或Btn 3我想隐藏Btn 2或Btn 3并显示Btn 1：

var hidden = false;
    function action() {
        hidden = !hidden;
        if(hidden) {
            document.getElementById('btn1').style.visibility = 'visible';
            document.getElementById('btn2').style.visibility = 'hidden';
            document.getElementById('btn3').style.visibility = 'hidden';
        } 
    }

这种方式隐藏按钮Btn 1 在可见的地方留下空白空间，或者如果我把它放在Btn 2 和Btn 3 的下面，那么我在Btn 2 和Btn 3 的地方有两个空白空间。

如何在html 页面的同一位置显示和隐藏按钮

Answer 1

使用display:none;在下面试试这个

difference between visibility:hidden and display:none

var btn1 = document.getElementById('btn1');

function action(el) {
  el.classList.add('hide');
  btn1.classList.remove('hide');
}

.hide {
  display: none;
}

<input type="submit" class="hide" value="Btn 1" id="btn1">
<input type="submit" value="Btn 2" id="btn2" onClick="action(this);">
<input type="submit" value="Btn 3" id="btn3" onClick="action(this);">