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

我有一個預訂系統，用戶將登錄預訂頁面並提示選擇日期/時間。當他們點擊按鈕時，我希望我的着陸頁圖像（包含在div中）隱藏，並且可用的座位（也在div中）顯示在同一位置。我在這個線程上發現了一些代碼How to hide one div and show another div using button onclick?。但是會發生什麼情況是，圖像從一開始就不會出現，屏幕只是空白，但第二個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>

來源

2016-02-23 dhool

是該頁面的PHP頁面？你有'<？php echo $ chart; ？>那麼輸出是什麼？ – j08691

你確定你不只是有一個破碎的圖像參考？ –

是啊它的一個PHP頁面，並輸出可用座位，工作正常。唯一的問題就是它的美學。是的，沒有破碎的圖像參考，我添加了圖像以外的圖像檢查，看起來很好。我的猜測是，我正在雙重阻止'seatspic'div，但我不知道在哪裏.. – dhool

關於如何使用一個類來切換兩個元素基本思路。

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>

來源

2016-02-23 17:59:26 epascarello

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

回答

相關問題