DOM问题 - 黑马程序员技术交流社区 - 黑马程序员IT技术论坛

<P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>">
<html xmlns="<A >http://www.w3.org/1999/xhtml</A>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*
*对表格中的ul进行样式的定义
*1，去除无序列表的样式。
*2，将列表的外边距和内边距取消。
*/
table ul{
list-style:none;
margin:0px;
padding:0px;
background-color: #3F6;
display:none;/*这个在CSS2.0文档中的属性中的布局里查找，隐藏列表下内容*/
}
/*
*对表格框线进行定义。
*以及单元格的框线进行定义
*/
table{
border:#00F 1px solid;
width:120px;
}
table td{
border:#00F 1px solid;
background-color: #FF6;
}
/*
*单元格中的超链接样式
*点击前和点击后一样
*/
table td a:link,table td a:visited{
color:#F0F;
text-decoration:none;
}
table td a:hover{
color:#0F0;
}
/*
*预定义一些样式
*在CSS2.0文档中的属性中的布局里查找display属性
*/
.open{
display:block;
}
.close{
display:none;
}
</style>
</head></P>
<P><body>
<!--
完成一个好友菜单，展开闭合的效果
而且要求一次开一个而关其它
-->
<script type="text/javascript">
function list(node){
//获取被操作的节点ul
/*先通过事件源超链接标签获取其父节点td，
*然后通过父节点获取ul节点，一般不用兄弟节点获取，
*因为它会根据浏览器不同会出现不同的兄弟节点
*/
var oTdNode = node.parentNode;
var oUlNode = oTdNode.getElementsByTagName("ul")[0];
//alert(oUlNode.nodeName);
//获取表格中中的所有ul节点
//先获取表格节点对象
var oTabNode = document.getElementById("friendlist");
var collUlNodes = oTabNode.getElementsByTagName("ul");
for(var x=0;x=collUlNodes.length;x++){
if(collUlNodes[x]==oUlNode){
if(oUlNode.className == "open"){
oUlNode.className = "close";
}else{
oUlNode.className = "open";
}
}else{
collUlNodes[x].className = "close";
}
}
//alert(oUlNode.className);//默认的oUlNode.className是null
}
</script>
<table id="friendlist">
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">我的好友</a>
<ul>
<li>好友1</li>
<li>好友2</li>
<li>好友3</li>
<li>好友4</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">同事好友</a>
<ul>
<li>好友1</li>
<li>好友2</li>
<li>好友3</li>
<li>好友4</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">大学同学</a>
<ul>
<li>好友1</li>
<li>好友2</li>
<li>好友3</li>
<li>好友4</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">同城老乡</a>
<ul>
<li>好友1</li>
<li>好友2</li>
<li>好友3</li>
<li>好友4</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
</P>

复制代码