码迷,mamicode.com
首页 > 编程语言 > 详细

javascript-设置div隐藏

时间:2015-01-10 12:33:21      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:

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:

.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‘;
    }
    teach_danamic.onmousemove = function () {
    teach_show.className = ‘dynamic_show‘;
    science_show.className = ‘dynamic_hide‘;
    }
}

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

<body onload="set_danamic()">

 

javascript-设置div隐藏

标签:

原文地址:http://www.cnblogs.com/listened/p/4214704.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!