显示一个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并隐藏另一个单击按钮

回答

相关问题