隐藏并显示任何元素

分享于 

5分钟阅读

Web开发

  繁體 雙語

介绍

在用户单击某个特定链接时,如果希望隐藏并显示包含特定项目的元素或者 DIV 或者 SPAN,则可能需要显示一些详细信息,以便显示特定的链接。

使用JavaScript很容易做到这一点。

如果要显示列表( 它可能是一个 <A> 或者 RADIO 或者 SELECT 元素) 中每个人的个人信息,在生成HTML时,在默认情况下呈现 SPAN 或者 DIV 标记。 如果使用 SPAN,则确定是否要在同一行或者下一行显示以下文本。

<DIVID="PersonalInfo1"style="display:none"><table><tr><td>Street</td><td>123 sr</td></tr><tr><td>City</td><td>LA</td></tr><tr><td>State</td><td>CA</td></tr></table></DIV>

现在你需要将这个 DIV 与实际的人联系起来。 它可能是 <A> 标记或者某个按钮或者 RADIO 按钮或者 SELECT 标记。

<Ahref="#"onclick="show('PersonalInfo1')">Senthil</A>

或者:

<inputtype="radio"value="senthil"onclick="show('PersonalInfo1')">senthil

或者:

<SELECTname="select1"onchange="show(this.value)"><optionvalue=""></option><optionvalue="PersonalInfo1">senthil</option></select>

或者:

<inputtype="button"onclick="show('PersonalInfo1')"value="personalInfo">

默认情况下,SPAN 是 inline 标记,意味着它只跟随流,并根据 lefttop 属性来移动位置。 这种情况下,你需要使用'inline'来显示或者设置 display =''。 如果使用 DIV,则应该使用 display ="block";

function show(ele) {
 var srcElement = document.getElementById(ele);
 if(srcElement!= null) {
 if(srcElement.style.display == "block") {
 srcElement.style.display= 'none';
 }
 else {
 srcElement.style.display='block';
 }
 returnfalse;
 }
}

单击超链接时,浏览器将显示 table。 如果再次单击,浏览器将隐藏它。

另一种方法是,你可以有一个共同的细节区域。 然后当用户单击链接或者按钮或者从下拉列表中选择项目时,可以在目标窗口中显示详细信息。

<DIVID="PersonalInfo"></DIV><Ahref="#"onclick="show('PersonalInfo1','
<table><tr><td>Street</td><td>123 sr</td></tr></table>
')">Senthil</A><Ahref="#"onclick="show('PersonalInfo','
<table><tr><td>Street</td><td>123 sr</td></tr></table>
')">Raj</A>
function show(ele,content) {
 var srcElement = document.getElementById(ele);
 if(srcElement!= null) {
 srcElement.innerHTML=content;
 }
}

上面 代码将用新的TABLE 替换 DIV的内部 HTML,或者:

<DIVID="PersonalInfo"></DIV><Ahref="#"onclick="show('PersonalInfo','PersonalInfo1')">senthil</A><DIVid="PersonalInfo1"style="display:none"><table><tr><td>Street</td><td>123 sr</td></tr><tr><td>City</td><td>LA</td></tr><tr><td>State</td><td>CA</td></tr></table>')"></DIV><Ahref="#"onclick="show('PersonalInfo','PersonalInfo2')">Raj</A><DIVid="PersonalInfo2"style="display:none"><table><tr><td>Street</td><td>123 sr</td></tr><tr><td>City</td><td>LA</td></tr><tr><td>State</td><td>CA</td></tr></table>')"></DIV>
function show(targetElement,contentElement) {
 var tarElement = document.getElementById(targetElement);
 var srcElement = document.getElementById(contentElement);
 if(tarElement!= null && srcElement!= null) {
 tarElement.innerHTML=srcElement.innerHTML;
 }
}

在 上面 代码中,我们为每个个人信息定义不同的DIV,并通过发送正确的DIV for与链接连接。


显示  HID