使用Javascript和getElementById显示DIV
displaying DIV using Javascript and getElementById
我有以下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为"system 1"的DIV将完美显示。但是，单击名为"system2"的链接时，不会显示ID为"system 2"的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中，systemLoeschen和systemLöschen是不相同的。
最好将函数名称保持为英文。部分是为了避免这样的问题（我不得不给很多法国程序员提供这个建议…），但也因为语言本身的关键词已经是英语了，坚持使用它是有意义的。
您从未关闭<div id="system1">标记，因此<div id="system2">实际上在内部。单击system2链接时，system1中的所有内容（包括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>您的HTML标记是错误的。据我所见，它在"system1"div中渲染"system2"，所以当你隐藏"system1"时，它也会隐藏它的子级（"system2"）
<TITLE>GPM ConnectionModul Systems Configuration</TITLE>
<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>
<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>相关文章：
- JavaScript/jQuery:显示DIV，直到用户停止在Textbox中键入
- 在if/else语句中显示DIV
- onSubmit在php脚本的开头显示DIV
- 使用getElementsByClassName在点击时显示Div的Javascript
- 使其在悬停文本时显示Div
- 如何只在收到服务器的回复消息后显示DIV
- 隐藏/显示DIV
- 简单的多选项卡隐藏/显示DIV
- 当满足javascript/jquery条件时显示DIV(包括jsFiddle链接）
- Javascript在秒消失时显示DIV元素，并在此之后隐藏栏的选项
- 如何根据另一个 DIV 内容的可见性显示 DIV 内容
- 单击时隐藏并显示 Div
- 如果选择了所有无线电中的任何一个选项，则显示 Div
- 如何根据 Div ID 内容隐藏/显示 DIV
- 在 JQuery 对话框中隐藏和显示 Div 内容
- 检测YouTube时间然后显示DIV?使用 JavaScript
- 按自定义顺序显示 DIV
- 当用户从页面底部达到 X 像素时，如何显示 DIV
- 在提交时显示 DIV 的内容
- 单击单选选择时动态显示 DIV
