javascript - 在顶部弹出 Div？

Question

您好，我有两个弹出式 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>

Answer 1

将用于隐藏 div 的脚本添加到用于在单击菜单项时显示 div 的脚本，这样当您单击菜单项时，您的代码首先隐藏所有可以来回切换的 div，然后仅显示与您刚刚单击的菜单项相对应的一个。

此外，您已将 ID“close”分配给两个不同的 div。 ID 应该是唯一的 - 只使用一次。使“关闭”类不是和 ID 以避免这种情况。