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. BZOJ_1901_&_ZJU_2112_Dynamic_Rankings_(主席树+树状数组/线段树+(Treap/Splay))

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1901 给出一个长度为n的数列A,有m次询问,询问分两种:1.修改某一位置的值;2.求区间[l, ...

  2. BZOJ_1002_[FJOI2007]_轮状病毒_(递推+高精)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1002 )*&*(^&*^&*^**()*) 1002: [FJOI20 ...

  3. Jersey+Spring+Maven（转）

    spring和maven的搭建参考相关文档.本文只介绍与jersey有关配置. 一.jersey在maven中的依赖包 <!-- jersey --> <dependency> ...

  4. jboss项目迁移至WebLogic12

    1 weblogic 使用jtds-1.2.3.jar驱动链接MS SQL Server 2008的数据源配置 1.1 拷贝jtds-1.2.3.jar至D:\Oracle\Middleware\wl ...

  5. Android——显示当前运行所有服务，判断服务是否运行

    1.显示系统当前所有运行服务: ActivityManager am = (ActivityManager) MainActivity.this.getSystemService(Context.AC ...

  6. ubuntu14.04安装ia32-lib

    sudo apt-get install libc6:i386 sudo -i cd /etc/apt/sources.list.d echo "deb http://old-release ...

  7. Web开发，如何从小工到专家

    最近在研读关于“整体性学习”的一些东西,收获颇丰. 整体性学习强调的东西有三样:结构.模型.与高速通道.特别是关于结构的篇章: 理解是什么?理解就是结构高度发达完善的结果. 是不是有些学科你可以轻松“ ...

  8. LIS，LDS的另类算法（原）

    自己在做有关俄罗斯套娃的题目时,发现自己写出的一个方法可以解决求最长上升子序列(LIS)和最长下降子序列(LDS)的问题. 俄罗斯套娃:这个问题在前一篇中讲的有,在此处就不多讲了~链接  求最长上升子 ...

  9. C#Stimulator项目>>>C/C++ DLL的生成和调用，Windows下的多线程

    Windows下的多线程 http://blog.csdn.net/ganpengjin1/article/category/2541791 使用C/C++建立DLL,环境VS2013 新建Win32 ...

  10. jvm参数设置大全

    转自:http://blog.csdn.net/kthq/article/details/8618052 参数说明 -Xmx3550m:设置JVM最大堆内存为3550M. -Xms3550m:设置JV ...