显示一个 div 并隐藏另一个单击按钮

Question

我有一个预订系统，用户将登陆预订页面并提示选择日期/时间。当他们单击按钮时，我希望我的登录页面图像（包含在div中）被隐藏，并且可用座位（也在div中）出现在同一个地方。我在这个线程上找到了一些代码 如何隐藏一个div 并使用按钮点击显示另一个div？.但是发生的情况是，图像从未从一开始就出现，屏幕只是空白的，但是第二个div确实出现了，所以这只是我遇到问题的第一个div。代码在下面，任何帮助都会很棒。

.JS：

function switchVisible() {
    if (document.getElementById('seatspic').style.display == 'none') {
        document.getElementById('seatspic').style.display = 'block';
        document.getElementById('seats').style.display = 'none';
    } else {
        document.getElementById('seatspic').style.display = 'none';
        document.getElementById('seats').style.display = 'block';
    }
} 

.HTML：

<div id="seats" style="display: none;">
    <?php echo $chart; ?>
</div>
<div id="seatspic">
    <img  style="display: block;" src="img/UCCBooking.jpg">
</div>
<a class="btn btn-primary btn-lg" onClick="switchVisible()">Check Availability</a>

Answer 1

关于如何使用类切换两个元素的基本思想。

function switchVisible() {
    document.getElementById("wrapper").classList.toggle("open");
} 

#wrapper #seats,
#wrapper.open #seatspic{
    display : block;
}
#wrapper.open #seats,
#wrapper #seatspic {
    display : none;
}

<div id="wrapper">
    <div id="seats">
        Seats
    </div>
    <div id="seatspic">
       Pic
    </div>
</div>
    <a class="btn btn-primary btn-lg" onClick="switchVisible()" href="#">Check Availability</a>