javascript - 使用Javascript和getElementById显示DIV

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        4年前关闭。



我有以下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。

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

最佳答案

您永远不会关闭<div id="system1">标记，因此<div id="system2">实际上位于其中。单击system1链接时，system2中的所有内容（包括system2）都被隐藏。

加

</div>

就在之前

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

<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>
    <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>