jquery - 使用javascript和onclick显示一个div

Question

我已经阅读了很多关于此的帖子，但我仍在苦苦挣扎。我正在尝试使用一些简单的 java 来显示和隐藏一个 div 类。我可以让它在 JSFiddle 中运行，但不能在我的实际网站上运行。

这是我正在使用的代码。 HTML 优先

<div id="mydiv1">
    <div id="mydiv-container">
        <div id="mydiv-content">
            <h1>Here's The Popup 1</h1>
            <br>Click the link to close.
            <br>
            <a href="#" onclick="show('mydiv2')">Open 2</a>
        </div>
    </div>
</div>

<div id="mydiv2"  style="display:none">
    <div id="mydiv-container">
        <div id="mydiv-content">
            <h1>Here's The Popup 2</h1>
            <br>Click the link to close.
            <br>
            <a href="#" onclick="hide('mydiv2')">Close 2</a>
        </div>
    </div>
</div>

JavaScript:

function show(target) {
document.getElementById(target).style.display = 'block';
}

function hide(target) {
document.getElementById(target).style.display = 'none';
}

无法解决为什么它不会在实时服务器上切换 div。

Answer 1

我认为您服务器上的问题是 id，即 mydiv1 和 mydiv2 不是唯一的。 id 重复。

如果 id 没有重复，请检查您的服务器。

id 应该始终是唯一的。

您可以在 Firefox 和 Chrome 上使用 Web Developer 扩展。在页面上获取重复的 id

1. 在浏览器上安装Web Developer
2. 点击 Web Developer 图标打开选项
3. 点击信息标签
4. 点击查找重复的 ID

希望这会有所帮助。

下载工具栏:

Chrome : https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?utm_source=chrome-app-launcher-info-dialog

火狐: https://addons.mozilla.org/en-US/firefox/addon/web-developer/?src=userprofile