实现的是在鼠标悬停在不同链接上，在同一位置切换显示想要显示的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>鼠标悬浮切换显示</title>

    <script type="application/javascript">

        function ChangeDiv(divId,divName,zDivCount)

        {

            for(i=0;i<=zDivCount;i++)

            {

               document.getElementById(divName+i).style.display="none";

            }

            document.getElementById(divName+divId).style.display="block";

        }

    </script>

</head>

<body>

<table border=0 cellSpacing=0 cellPadding=0 width="100%">

    <tbody>

    <tr height=44 vAlign=top>

        <td><a onmouseover="ChangeDiv('0','JKDiv_',2)" href="#">新闻一</a></td>

        <td bgColor=#ffffff width=1></td>

        <td ><a onmousemove="ChangeDiv('1','JKDiv_',2)" href="#">新闻二</a></td>

        <td bgColor=#ffffff width=1></td>

        <td ><a onmousemove="ChangeDiv('2','JKDiv_',2)" href="#">新闻三</a>

        </td>

    </tr>

    </tbody>

</table>

<table id="JKDiv_0"  style="background-color: #0b4ebf;display:block">

    <tbody>

    <tr>

        <td>000</td>

        <td>000</td>

        <td>000</td>

    </tr>

    </tbody>

</table>

<table id="JKDiv_1" style="background-color:#3071A9;display:none">

    <tbody>

    <tr>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

    </tbody>

</table>

<table id="JKDiv_2" style="background-color: #FF0000;display:none">

    <tbody>

    <tr>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

    </tbody>

</table>

</body>

</html>

使用JS实现鼠标悬浮切换显示的更多相关文章

  1. 鼠标悬浮tip 显示

    鼠标悬浮tip 显示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  2. 鼠标悬浮上去显示小手CSS

    鼠标悬浮上去显示小手CSS只需要添加一句css代码即可 cursor:pointer;

  3. CSS/JS图片鼠标悬浮一道光闪过

    看到有些网站logo鼠标悬浮上面的时候,会出现一道光,一闪而过,刚开始以为是gif图,已审查, 居然不是:现在就实现在这种效果: 先看看CSS实现的效果图: 看到没,就是这道刺眼的白光....   啊 ...

  4. css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...

  5. JS实现鼠标悬浮,显示内容

    其实就是增加title属性

  6. js实现点击切换显示隐藏，点击其它位置再隐藏

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

  7. ReportViewer 2010 打印预览，用鼠标快速切换显示比例时报错：存储空间不足，不能处理此命令

    CreateCompatibleDIB 存储空间不足 无法处理此命令 安装 ReportViewer 2010 sp1 即可.

  8. echarts —— tooltip 鼠标悬浮显示提示框属性

    最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...

  9. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

随机推荐

  1. angular : ng-animate : css 原理，详解

    通过几中指令就能完成1.2.xx的animate ·ng-repeat ·ng-show,ng-hide ·ng-if,ng-include,ng-view ·ng-switch ·ng-class ...

  2. everything 快速搜索有代价

    我在一台电脑上运行过everything后,把它拷贝到另一台电脑上运行,前一台电脑上的搜索结果记录居然还,包括文件类型,标题,大小,位置.天呐··· 虽然看不到内容,但对于一个社工来说,一个标题完全足 ...

  3. 【struts2】ActionContext与ServletActionContext

    1 再探ActionContext 我们知道,ActionContext是Action执行时的上下文,里面存放着Action在执行时需要用到的对象,也称之为广义值栈.Struts2在每次执行Actio ...

  4. python之数据库(mysql)操作

    前言: 最近开始学django了,学了下web框架,顿时感觉又会了好多知识.happy~~ 这篇博客整理写下数据库基本操作,内容挺少.明天写SQLAlchemy. 一.数据库基本操作 1. 想允许在数 ...

  5. 根据WaitType诊断故障

    在查询执行时,等待次数和等待时间在一定程度上指示查询的瓶颈,甚至非常有助于对系统进行诊断.偶尔一次的异常等待,不足以表明系统存在瓶颈,但是,SQL Server实例经常出现特定的等待类型,并且等待时间 ...

  6. 利刃 MVVMLight 4：绑定和绑定的各种使用场景

    一.绑定: 主要包含元素绑定和非元素绑定两种. 1.元素绑定,是绑定的最简单形式,源对象是WPF的元素,并且源对象的属性是依赖项属性. 根据我们之前的知识 ,依赖项属性具有内置的更改通知支持.所以当我 ...

  7. Python拉勾爬虫——以深圳地区数据分析师为例

    拉勾因其结构化的数据比较多因此过去常常被爬,所以在其多次改版之下变得难爬.不过只要清楚它的原理,依然比较好爬.其机制主要就是AJAX异步加载JSON数据,所以至少在搜索页面里翻页url不会变化,而且数 ...

  8. Java程序员入门：Java程序员面试失败的5大原因

    1 说得太少 尤其是那些开放式的问题,如"请介绍下你自己"或"请讲一下你曾经解决过的复杂问题".面试官会通过你对这些技术和非技术问题的回答来评估你的激情.他们也 ...

  9. Unity Shader 知识点总结（二）

    紧接着上一篇文章的shader入门知识的总结,本文主要总结shader中的纹理贴图.透明度混合.顶点动画.后期特效处理等操作.如果有什么地方有错,请指出更正,谢谢.本文的代码主要来自开源书:unity ...

  10. Select的逻辑处理顺序(Transact-SQL)

    1. Select 语句基本写法 2. Select的逻辑处理顺序 SQL与其他编程语言不同的明显特征就是代码的处理顺序.在其他编程语言中,常见是按编写代码的先后顺序(从上之下)来处理.但在SQL中, ...