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. （转载）puremvc框架之proxy

    (转载)http://www.cnblogs.com/yjmyzz/archive/2010/08/01/1789769.html 上一篇 puremvc框架之Command 里,已经学习了如何利用C ...

  2. EXT 组件一些属性与方法（Tree）

    1.Ext.tree.TreePanel 主要配置项: root:树的根节点. rootVisible:是否显示根节点,默认为true. useArrows:是否在树中使用Vista样式箭头,默认为f ...

  3. HDOJ/HDU 2203 亲和串(简单的判断~Java的indexOf()方法秒)

    Problem Description 人随着岁数的增长是越大越聪明还是越大越笨,这是一个值得全世界科学家思考的问题,同样的问题Eddy也一直在思考,因为他在很小的时候就知道亲和串如何判断了,但是发现 ...

  4. HDOJ/HDU 2087 剪花布条(indexOf()应用~~)

    Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入 ...

  5. Android学习笔记（十三）SharedPreference必须掌握的基础

    我们在开发中,应用程序会保存少量数据,例如一些字符串.一些标记或者一些配置文件,这时候如果去使用SQLite保存这些数据的话,难免会显得大材小用,用起来也不方便,对于这种信息,保存在SharedPre ...

  6. 日志配置logback

    在选择项目日志框架时,发现log4j的作者开发了新的日志框架,据说性能提高不少,那就选它了,不过,除了配置上有点不习惯外,最重要的一点 ,打印线程号这个功能依然没有(打印线程名这个东西是在是个鸡肋). ...

  7. 存储过程实例总结(开发中的错误与总结,调试,数据库函数DATEDIFF计算当前日期是否在本周内)

    USE [POND] GO /****** Object: StoredProcedure [dbo].[OrderChargeList] Script Date: 04/16/2014 13:32: ...

  8. Win7 下安装RabbitMQ

    RabbitMQ依赖erlang,所以先安装erlang,然后再安装RabbitMQ; 下载RabbitMQ,下载地址: rabbitmq-server-3.5.6.exe和erlang,下载地址:o ...

  9. 有用的javascript外部文件或其他外部文件引用

    1.<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/ ...

  10. svn 上传 过滤

    代码上传过程中发现.so文件不能上传,查了一下,发现是svn服务器要设置上传过滤:很多文件,会被过滤掉,不能正常上传.设置如下: 通过终端打开配置文件: open ~/.subversion/conf ...