在 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;试试这个

可见性：隐藏和显示之间的区别：无

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);">