您的位置：首页 > Web前端 > JavaScript

javascript学习实录之六（div开关闭合效果实例） --刘小小尘

2013-05-10 21:11 429 查看

以下代码是我写的关于标签开关闭合效果的实例，很简单的，内容及含义我就不说了，仔细看看，so easy

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title></title>
<script type="text/javascript">
function list2() {
var aNode = event.srcElement;
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) {
openClose(divNodes[x])
} else {
divNodes[x].className = "close";
}
}

}
function openClose(divNode) {
if(divNode.className == "open") {
divNode.className = "close";
} else {
divNode.className = "open";
}
}
</script>

<style type="text/css">
table {
border: cadetblue 1px solid;
}
table td {
border: #0000FF 1px solid;
background-color: #00CCFF;
}
table td div {
background-color: #66FFCC;
display: none;
}
table td a:link, table td a:visited {
text-decoration: none;
color: #993300;
}
.open {
display: block;
}
.close {
display: none;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友列表</a><br/>
<div>
javascript学习实录 之五（节点操作）<br/>
javascript学习实录 之五（节点操作）<br/>
javascript学习实录 之五（节点操作）<br/>
javascript学习实录 之五（节点操作）<br/>
</div>
</td>
</tr>

<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友列表</a><br/>
<div>
javascript学习实录 之五（节点操作）<br/>
javascript学习实录 之五（节点操作）<br/>
javascript学习实录 之五（节点操作）<br/>
javascript学习实录 之五（节点操作）<br/>
</div>
</td>
</tr>

<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友列表</a><br/>
<div>
javascript学习实录 之五（节点操作）<br/>
javascript学习实录 之五（节点操作）<br/>
javascript学习实录 之五（节点操作）<br/>
javascript学习实录 之五（节点操作）<br/>
</div>
</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

javascript学习实录 之六（div开关闭合效果实例） --刘小小尘

javascript学习实录之六（div开关闭合效果实例） --刘小小尘