隐藏并显示任何元素

分享于 

分钟阅读

 
点击句子查看译文 显示原文      显示译文      双语对照    源址


Introduction

If you want to hide and show an element or DIV or SPAN that contains relevant information for a particular item, e.g., when the user clicks on a particular link, you may want to show some details.

It is easy to do this using JavaScript.

If you want to display personal information for each person in the list (it may be a <A> or RADIO or SELECT element), when you generate the HTML, render the personal information section within a SPAN or DIV tag which is hidden by default.if you use SPAN, then make sure whether you want to display the following text on the same line or on the next line.

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

Now you need to connect this DIV with the actual person.it may be <A> tag or some button or RADIO button or SELECT tag.

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

or :

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

or :

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

or :

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

By default, SPAN is an inline tag meaning it will just follow the flow and shift the position based on left and top properties.in that case, you need to use ' inline 'to make it display or set display = ''.if you use DIV, you should use 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;
 }
}

When you click on the hyperlink, the browser will show the table.if you click again, the browser will hide it.

Another way is that you can have a common detail area.then when the user clicks a link or button or selects an item from the drop down, you can display details in the target.

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

The above code will replace the inner HTML of the DIV with the new TABLE or :

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

In the above code, we define different DIV s for each personal information and connect them with the link by sending the correct DIV ID for the second argument.


显示  HID