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\';来完成.