顯示一個div並隱藏另一個單擊的按鈕

Question

我有一個預訂系統，用戶將在該頁面上登陸並提示您選擇日期/時間。 當他們單擊按鈕時，我希望隱藏我的着陸頁圖像（包含在div ），而可用座位（也包含在div ）顯示在同一位置。 我在此線程上找到了一些代碼。 如何使用onclick按鈕隱藏一個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>