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