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. Apache Struts 远程代码执行漏洞(CVE-2013-4316)

    漏洞版本: Apache Group Struts < 2.3.15.2 漏洞描述: BUGTRAQ ID: 62587 CVE(CAN) ID: CVE-2013-4316 Struts2 是 ...

  2. 如何编译Support7Demos测试appcompat

    目录(?)[-] 简介 在Eclipse中编译 使用Gradle编译 简介 Google发布的API-18中带上的support-v7包含了appcompat组件,可以在小于API-11的androi ...

  3. 统计难题 HDOJ--2222

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  4. SQLServer的ISNULL函数和Mysql的IFNULL函数

    SQL Serve的ISNULL函数: ISNULL(check_expression,replacement_value) 1.check_expression与replacement_value的 ...

  5. devi into python 笔记（四）python的类

    import 与 from ... import ...: #types只是一个包,FunctionType只是这个包里的一个函数.这里用它来演示 import types #如果要用Function ...

  6. C#面向对象的三大特征

    一,封装:我们可以把世界上任何一个东西都看作为一个对象,那么我们这里以人为例,一个人就肯定是一个对象了.那么封装是什么呢?封装就是这个人要完成一件事情,他所需要的任何工具都带在了自己的身上,所需要的技 ...

  7. Javascript 查找字符串中出现最多的字符和出现的次数

    <script type="text/javascript"> //查找字符串中出现最多的字符和出现的次数 var str = 'Thatwheneying its o ...

  8. 使用DNSAgent拦截特定域名

    开发程序时,为方便测试,需要把本来发往abc.com的数据发到本地. 最简单的方法是直接在程序中修改,把abc.com修改为需要的地址. 但这样提交代码时,容易把调试地址给提交到服务器. 或是嵌入式设 ...

  9. RHEL7 -- Linux搭建FTP虚拟用户

    安装vsftpd软件包[root@localhost ~]# yum install vsftpd -y [root@localhost ~]# yum install db4 db4-utils 建 ...

  10. 7月19日Docker&Kubernetes技术沙龙总结 - DockOne.io

    7月19日Docker&Kubernetes技术沙龙总结 - DockOne.io undefined