您好,我点击主导航时会弹出两个弹出式div。目前,第二个div总是保持在最顶层所以你必须关闭它才能到达第一个div。这是我的网站链接,您可以看到我在说什么:http://nshek.com/
当您点击混合媒体然后点击摄影时,没有问题。但是,当你打开照片弹出窗口时单击混合媒体时,我想这样做,它显示在顶部。
非常感谢任何帮助。这是我导航和代码的代码。弹出式窗口。
<ul id="topnav">
<li><a href = "javascript:void(0)" onclick = "document.getElementById('print').style.display='block';document.getElementById('fade').style.display='block'">mixed media/prints</a></li>
<div id="print" class="white_content">
<div id="link">
<b>prints</b>
<br />-<a href="/photobased.php">photo-based</a>
<br />-<a href="/silkscreen.php">silkscreen</a>
<br />-<a href="/relief.php">relief/monoprint</a>
<br />-<a href="/litho.php">lithography</a>
<br><b>other mediums</b>
<br />-<a href="">mixed media</a>
<br />-<a href="">paintings</a>
</div>
<br><br>
<div id="close"><a href = "javascript:void(0)" onclick = "document.getElementById('print').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
</div>
<li><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">photography</a></li>
<div id="light" class="white_content">
<b>digital photography</b>
<br /><div id="link">
-<a href="">list series</a>
<br />-<a href="/">view all</a>
</div>
<br><b>film photography</b>
<br /><div id="link">
-<a href="/cafilm.php">california, usa</a>
<br />-<a href="/hkfilm.php">hong kong</a>
<br />-<a href="/miscfilm.php">miscellaneous</a>
</div>
<br><br>
<div id="close"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
</div>
<li><a href="/digitalworks.php">digital works</a></li>
<li><a href="/CV.php">CV/resumé</a></li>
<li><a href="/contact.php">contact</a></li>
</ul>
答案 0 :(得分:0)
将用于隐藏div的脚本添加到脚本中,以便在单击菜单项时显示div,以便在单击菜单项时,代码首先隐藏所有可以来回切换的div,然后仅显示与您刚刚点击的菜单项对应的一个。
此外,您已将id“close”分配给两个不同的div。 Id应该是唯一的 - 只使用一次。 “关闭”一个类而不是ID以避免这种情况。
答案 1 :(得分:0)
在你的情况下,你只是没有隐藏下一个弹出窗口,它可能有比你的第一个更高的z-index,所以你只需要先隐藏它,然后下一个div弹出正常。 通过jQuery解决方案:
$('#showFirst').bind('click', function(){
$('#1').show();
$('#2').hide();
})