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

javascript-设置div隐藏的更多相关文章

  1. 设置DIV隐藏与显示，表格滑动条

    问题描述:         现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决:   (1)DIV块的隐藏与显示 如上所示, ...

  2. JavaScript设置div中的文字滚动起来 实现滚动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  4. Html 使用技巧 -- 设置display属性可以使div隐藏后释放占用的页面空间

         div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;" document.getElemen ...

  5. JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...

  6. 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色

    1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...

  7. 点击一个div隐藏另一个div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  9. 设置Div多行文本超出时，以省略号代替

    这个文章不错 http://www.css88.com/archives/5206 css中有一个属性: text-overflow,可以设置文本超出指定长度后的文本截取样式. 下面是从 w3shco ...

  10. jQuery实现鼠标点击div外的地方div隐藏消失的效果（转）

    转:https://www.cnblogs.com/jsingleegg/p/3456152.html css部分: <style type="text/css">.p ...

随机推荐

  1. 关于Azure Auto Scale的高级属性配置

    Auto Sacle是一种自动化管理云服务负载的功能,系统可以根据预先制定的规则,在满足条件的情况下对计算实例的数量进行增减从而可以用来优化使用Azure的计算资源,可以适用于Cloud Servic ...

  2. Colour your Log4Net events in your RichTextBox zz

    You’re most probably here because you have already read my article How to watch your log through you ...

  3. Java基础（二十三）GUI图形界面编程(Java基础完)

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  4. linux 多线程基础1

    一．什么是线程        在一个程序里的多个执行路线就叫做线程.更准确的定义是:线程是“一个进程内部的一个控制序列”. 典型的unix进程可以看成只有一个控制线程:一个进程在同一时刻只做一件事情. ...

  5. Cocoa深入学习:NSOperationQueue、NSRunLoop和线程安全

    http://blog.cnbluebox.com/blog/2014/07/01/cocoashen-ru-xue-xi-nsoperationqueuehe-nsoperationyuan-li- ...

  6. eclipse 反编译class 文件 插件-jad

    1.下载 jad.exe  http://pan.baidu.com/s/1i3Ga33n 2.下载jadeclipse http://pan.baidu.com/s/1bn4H1iZ  放在ecli ...

  7. table 的thead th 固定 tbody滚动例子

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. ASP.NET MVC- MvcPager

    本文目标 一.能够使用MvcPager进行分页 本文目录 一.MvcPager控件的简单使用 二.C#扩展方法 一.MvcPager控件的简单使用 1.添加MvcPager.dll的引用[下载] 2. ...

  9. Java集合类总结

    Java的集合类关系图,摘自网络: List: 1,ArrayList:内部采用数组存储结构:随机查找效率高,增删效率低:线程不安全: 2,LinkedList:内部采用链表存储结构:增删效率高,查找 ...

  10. hibernate性能消耗太狠了。果断减肥引发的连串意外惊喜

    近期在云服务器上新部署了一个项目 硬件配置 CPU: 2核    内存: 4096 MB (I/O优化) 开始是调试测试在用 没发觉,今天我看了下监控 cpu使用率达到了60-70% 而且一直持续 我 ...