使用Javascript和getElementById显示DIV_Javascript_Html_Css

使用Javascript和getElementById显示DIV

javascript html css

使用Javascript和getElementById显示DIV,javascript,html,css,Javascript,Html,Css,我有以下HTML： <HTML> <HEAD> <TITLE>GPM ConnectionModul Systems Configuration</TITLE> <LINK rel="stylesheet" href="GPM_SFTPConnector.css" type="text/css"> <script> function systemAnzeigen(systemid

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


GPM连接模块系统配置
函数SystemAnzegin（systemid）{
var elms=document.getElementsByClassName（“connectionClass”）；
对于（i=0；i列出系统时出错：[ISC.0049.9009]在“未标记的分支”处缺少所需的属性开关
Konfigurierete系统
系统ID
安德伦
洛申
系统1
连接ID
试的记录
映射
轮询器1
SFTP
soapConnection1
肥皂
mymapping
系统2
连接ID
试的记录
映射
RestConnection1
休息

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

有人能解释一下，为什么这不起作用，以及如何让它起作用

使用Visual Studio它向我展示了

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

缺少它的结束标记

。我假设您希望将

放在system2标记之前：

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

缺少标记将导致布局问题

要调试JavaScript，请确保使用浏览器控制台，此时将显示任何错误（按F12）

JavaScript不了解Umlaut

所以在JavaScript中，

systemLoeschen

和

systemLöschen

是不同的

将函数名保留为英语是个好主意。部分原因是为了避免这些问题（我不得不向不止几个法国程序员提出这个建议…），但也因为语言本身的关键字已经是英文的，坚持使用它是有意义的。

您的HTML标记是错误的。从我看到的情况来看，它在“system1”div中呈现“system2”，因此当您隐藏“system1”时，它也会隐藏其子项（“system2”）

GPM连接模块系统配置
函数SystemAnzegin（systemid）{
var elms=document.getElementsByClassName（“connectionClass”）；
对于（i=0；i列出系统时出错：[ISC.0049.9009]在“未标记的分支”处缺少必需的属性开关

Konfigurierete系统
系统ID
安德伦
洛申
系统1
连接ID
试的记录
映射
轮询器1
SFTP
soapConnection1
肥皂
mymapping
系统2
连接ID
试的记录
映射
RestConnection1
休息

您永远不会关闭

标记，因此

实际上就在它里面。单击

system2

链接时，

system1

（包括

system2

）中的所有内容都将隐藏

加

就在之前

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


函数SystemAnzegin（systemid）{
var elms=document.getElementsByClassName（“connectionClass”）；
对于（i=0；i<div class="connectionClass" id="system2" style="display: none;">