javascript - 使用 Javascript 和 getElementById 显示 DIV

<分区>

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 7 年前。

我有以下 HTML:

<HTML>
<HEAD>
    <TITLE>GPM ConnectionModul Systems Configuration</TITLE>
    <LINK rel="stylesheet" href="GPM_SFTPConnector.css" type="text/css">

    <script>


        function systemAnzeigen(systemid) {
            var elms = document.getElementsByClassName("connectionClass");

            for (i = 0; i < elms.length; i++) {
                if (elms.item(i).id == systemid) {
                    elms.item(i).style.display = 'block';
                } else {
                    elms.item(i).style.display = 'none';
                }

            }
        }


        function systemAendern(systemid) {
            alert("System aendern: " + systemid);
        }

        function systemLöschen(systemid) {
            alert("System loeschen: " + systemid);
        }

    </script>
</HEAD>
<BODY>

    <strong>Error listing systems: </strong> [ISC.0049.9009] Missing required property switch at 'unlabeled BRANCH'<P>

        <strong>Konfigurierete Systeme</strong>

        <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
            <TR>
                <TH>System-ID</TH>
                <TH>Ändern</TH>
                <TH>Löschen</TH>
            </TR>

            <TR>
                <TD><a href="javascript:systemAnzeigen('system1');">system1</a></TD>
                <TD><img onclick="javascript: systemAendern('system1');" src="edit.gif" /></TD>
                <TD><img onclick="javascript: systemLoeschen('system1');" src="delete.gif" /></TD>
            </TR>

            <TR>
                <TD><a href="javascript:systemAnzeigen('system2');">system2</a></TD>
                <TD><img onclick="javascript: systemAendern('system2');" src="edit.gif" /></TD>
                <TD><img onclick="javascript: systemLoeschen('system2');" src="delete.gif" /></TD>
            </TR>
        </TABLE>


        <div class="connectionClass" id="system1" style="display: none;">

            <h4>system1</h4>

            <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
                <TR>
                    <TH>Connection-ID</TH>
                    <TH>Protokoll</TH>
                    <TH>Mapping</TH>
                </TR>

                <TR>
                    <TD>poller1</TD>
                    <TD>SFTP</TD>
                    <TD></TD>

                </TR>

                <TR>
                    <TD>soapConnection1</TD>
                    <TD>SOAP</TD>
                    <TD>mymapping</TD>

                </TR>
            </TABLE>

            <div class="connectionClass" id="system2" style="display: none;">

                <h4>system2</h4>

                <TABLE class="GPMTable" style="font-family:sans-serif;font-size:small">
                    <TR>
                        <TH>Connection-ID</TH>
                        <TH>Protokoll</TH>
                        <TH>Mapping</TH>
                    </TR>

                    <TR>
                        <TD>RestConnection1</TD>
                        <TD>REST</TD>
                        <TD></TD>

                    </TR>
                </TABLE>
            </div>

    <P><a href="index.html">Home</a><P>

当单击名为“system1”的链接时，ID 为“system1”的 DIV 会完美显示。但是，当单击名为“system2”的链接时，不会显示 ID 为“system2”的 DIV。

有人可以解释为什么这不起作用以及如何让它起作用吗？

最佳答案

使用 Visual Studio 它告诉我

<div class="connectionClass" id="system1" style="display: none;">`

缺少它的结束标记 </div> .我假设你想把 </div>就在 system2 标签之前:

<div class="connectionClass" id="system2" style="display: none;">

缺少标签会导致布局问题

要调试 JavaScript，请确保使用浏览器控制台，任何错误都会显示(按 F12)

关于javascript - 使用 Javascript 和 getElementById 显示 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33895885/

上一篇：javascript - 我无法在 html 中显示部分

下一篇：javascript - 什么时候使用 "class"与 "id"？

相关文章：

javascript - 通过单击其中一个元素来切换多个元素的状态

javascript - 在鼠标悬停时以弹出窗口/工具提示形式显示 Kendo UI 网格中每一行的行详细信息

javascript - HTML:水平居中元素数量未知的未排序列表

javascript - 仅使用 CSS 在智能手机上实现分页(无 Javascript/JQuery)

css - 是否有 CSS 父级选择器？

html - 大文字不 float 正确

javascript - AJAX:用收集到的数据中的特定 div 替换 div 的内容

javascript - 为什么 "reject"在此代码中实际上并未拒绝？

javascript - DataTables 无法重新初始化或需要插件

html - 排列第三级下拉导航的问题