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. C++11内存模型的一些补充阅读材料

    <Intel Threading Building Block> O'REILLY Chapter 7 Mutual Exclusion - Atomic Operation - Memo ...

  2. ES2015 (ES6)

    是时候使用ES 2015了 你可能不再需要Underscore BABEL Grunt 先 babel 再用 babel 后的文件 uglify 去掉严格模式.严格模式下全局的this转成了undef ...

  3. 全面理解Unity加载和内存管理

     全面理解Unity加载和内存管理http://game.ceeger.com/forum/read.php?tid=4394&fid=2&uid=6507 1.用简单的“for”循环 ...

  4. C#的类成员初始化顺序

    C#的类成员的定义和声明如下 using UnityEngine; using System.Collections; public class TestController : ECControll ...

  5. sql date 的精度问题

    new  java.sql.Date(...) 是经过yyyy-MM-dd 格式化后的时间格式. 如果需要:HH:mm:ss .则要用 new java.sql.Timestamp(.....);

  6. Bzoj 2243: [SDOI2011]染色 树链剖分,LCT,动态树

    2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 5020  Solved: 1872[Submit][Status ...

  7. Yii AR Model CRUD数据库操作

    Yii AR很好很强大,但刚开始不知道怎么使用,可以先看下官方文档 官方文档:http://www.yiichina.com/guide/database.ar 下面是我对AR的一些理解 对于一个Mo ...

  8. ARCGIS 点抽稀的实现

    点抽稀是制图综合的一部分,即在点数据点特别密集是,需要选取比较重要的点而舍去不要重的点,使得图面整洁. 一.基本原理 先把所有的点符号都设成透明.这样显示是没有点的.然后给这些点设置标注.标注方法很奇 ...

  9. HDU 2298 Toxophily

    题目: Description The recreation center of WHU ACM Team has indoor billiards, Ping Pang, chess and bri ...

  10. FLASH轮播广告 在谷歌浏览器中不显示的解决办法（FLash轮播放广告在谷歌浏览器中无法显示处理方法）

    在用PHPWEB模板的时候,碰到首页有一个FLASH轮播广告,在IE浏览器下可以正常显示播放,在谷歌浏览器中却显示不了,解决办法如下: 欢迎转载:http://blog.csdn.net/aminfo ...