Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> show hide effect </title>
<Style type = "text/css">
Table {
Border: # 0000FF 1px solid;
}
Table td {
Border: # 0033FF 1px solid;
Background-color: # 6699FF;
}
Table td div {
Background-color: # FFFF99;
Display: none;
}
Table td a: link, table td a: visited {
Text-decoration: none;
Color: #993300;
}
. Open {
Display: block;
}
. Close {
Display: none;
}
</Style>
<Script type = "text/javascript">
Function list (){
Var aNode = event. srcElement;
// Alert (aNode. nextSibling. nodeName); // It is easy to get an empty text node from a sibling node.
Var tdNode = aNode. parentNode;
Var divNode = tdNode. getElementsByTagName ("div") [0];
Var tabNode = document. getElementsByTagName ("table") [0];
Var divNodes = tabNode. getElementsByTagName ("div ");
For (var x = 0; x <divNodes. length; x ++ ){
If (divNodes [x] = divNode ){
If (divNode. className = "open "){
DivNode. className = "close ";
} Else {
DivNode. className = "open ";
}
} Else {
DivNodes [x]. className = "close ";
}
}
// Alert (divNode. nodeName );
}
</Script>
</Head>
<Body>
<Table>
<Tr>
<Td>
<A href = "javascript: void (0)" onclick = "list ()"> friend menu list </a>
<Div>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
</Div>
</Td>
</Tr>
<Tr>
<Td>
<A href = "javascript: void (0)" onclick = "list ()"> friend menu list </a>
<Div>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
</Div>
</Td>
</Tr>
<Tr>
<Td>
<A href = "javascript: void (0)" onclick = "list ()"> friend menu list </a>
<Div>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
</Div>
</Td>
</Tr>
<Tr>
<Td>
<A href = "javascript: void (0)" onclick = "list ()"> friend menu list </a>
<Div>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
New white-haired witch pass <br/>
</Div>
</Td>
</Tr>
</Table>
</Body>
</Html>