您的位置：首页 > 其它

实例入门(简单展开或关闭)

2008-11-13 14:48 597 查看

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

<title>简直的展开或关闭</title>

<style type="text/css">

.hide{display:none;}

.show{display:block;}

.hand{cursor:pointer;}

.text{padding:10px;background:#F3FCFF;line-height:1.3em;border:solid 5px #B2DCF9;margin-bottom:7px;}

</style>

<script type="text/javascript">

/*根据点击项，动态加载内容至iframe中

expand(展开),e_d即expand div

container(容器),c即容器缩写

b为bool缩写

n为num缩写

*/

function e_d(obj,n){//这二个参数构成iframe里的子页面。test1.htm/test2.htm/test3.htm

var c = obj.parentNode.nextSibling; /*取父级的下一个节点,跟父级同辈的。*/

var b = ( c.className == 'hide' );

obj.src = 'images/' + (b?'minus':'plus') + '.gif'/*变换+-图片*/

c.className=b?'text':'hide'

if(!c.innerHTML){//如果这一层里没有内容才更新。有内容则不变化

var str = '<iframe id="iframe' + n + '" src="test' + n + '.htm" scrolling="auto" frameborder="0" width="100%" height="100%"';

str += 'onload="this.style.height=iframe' + n + '.document.body.scrollHeight+30"></iframe>';

c.innerHTML = str;

}

}

</script>

</head>

<body>

<div>

<div class="hand">

<img src="images/plus.gif" alt="展开" onclick='e_d(this,1)' />展开1

</div>

<div class="hide"></div>

</div>

<div>

<div class="hand">

<img src="images/plus.gif" alt="展开" onclick='e_d(this,2)' />展开2

</div>

<div class="hide"></div>

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航