javascript-设置div隐藏

html code:

<div class="title">
    <ul id="col02_left_title">
    <li><a id="science_danamic" href="#">科研动态</a></li>
    <li><a id="teach_danamic" href="#">教学动态</a></li>
    </ul>
</div>
<div class="content">
    <!--<iframe id="col02_left_content" scrolling="no" target="_parent" class="content_frame" src="content/科研动态.html"></iframe>-->
    <div id="col02_left_content" class="content_frame">
    <div id="science_show" class="dynamic_show">科研动态-内容</div>
    <div id="teach_show">教学动态-内容</div>
    </div>
</div>

css(display若隐藏,不会占空间;visibility则会占):

.dynamic_show {
    display:block;
}
.dynamic_hide {
    display:none;
}

javascript:

function set_danamic() {
    var science_danamic = document.getElementById('science_danamic');
    var science_show = document.getElementById('science_show');

    var teach_danamic = document.getElementById('teach_danamic');
    var teach_show = document.getElementById('teach_show');

    teach_show.className = 'dynamic_hide';

    science_danamic.onmouseover = function () {
    science_show.className = 'dynamic_show';
    teach_show.className = 'dynamic_hide';　　//设置className属性.
    }
    teach_danamic.onmousemove = function () {
    teach_show.className = 'dynamic_show';
    science_show.className = 'dynamic_hide';
    }
}

最后,在 body事件中回调即可:

<body onload="set_danamic()">

 (补):感觉js还是蛮坑人的,有时设置 className却不起作用,由于这里css不是很复杂,可以设置style.display = 'block';或style.display = 'none';来完成.

posted @ 2015-01-10 12:19  wonkju  阅读(1960)  评论(0)  编辑  收藏  举报