实现的是在鼠标悬停在不同链接上，在同一位置切换显示想要显示的内容
<!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. SQL SERVER的事务日志

    1 基本介绍 每个数据库都具有事务日志,用于记录所有事物以及每个事物对数据库所作的操作. 日志的记录形式需要根据数据库的恢复模式来确定,数据库恢复模式有三种: 完整模式,完全记录事物日志,需要定期进行 ...

  2. YUM 安装及清理

    Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RPM包并且安装,可以自动处理 ...

  3. JS完成页面跳转并传参的方法|附加：循环遍历对象

    此方法只能传递较少参数 方法如下: <a href='page/index.html'>跳转</a> 以上是正常写法,如果要传参按一下写法: <!--参数写在?后面,多个 ...

  4. Selenium Web 自动化 - 项目持续集成（进阶）

    Selenium Web 自动化 - 项目持续集成(进阶) 2017-03-09 目录 1 背景及目标2 环境配置  2.1 SVN的安装及使用  2.2 新建Jenkins任务3 过程分析 1 背景 ...

  5. 走进 Redis 的世界

    NoSQL(Not Only SQL) 在现今已经应用非常普遍了,尤其是 Redis 和 MongoDB.我们现在来说说 Redis. 前世 Redis 是一个意大利人 Salvatore Sanfi ...

  6. poj 2229 DP

    Sumsets Time Limit: 2000MS   Memory Limit: 200000K Total Submissions: 15326   Accepted: 6088 Descrip ...

  7. Struts2中的配置文件的加载

    Struts2框架配置文件加载顺序(服务器启动之后, 这些配置文件会按照顺序一一加载进内存, 进行类等匹配的时候才会去内存查找):    1. default.properties    2. str ...

  8. 1640: [Usaco2007 Nov]Best Cow Line 队列变换

    1640: [Usaco2007 Nov]Best Cow Line 队列变换 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 543  Solved: 2 ...

  9. #include<bits/stdc++.h>

    在听学长讲课时看到了#include<bits/stdc++.h>这个头文件,瞬间懵逼辣,百度后了解了 #include<bits/stdc++.h>,包含了C++的所有头文件 ...

  10. 解决ecshop进入后台服务器出现500的问题

    ecshop安装完成以后,前台页面打开正常,但是后台页面大家会出现500错误,看了很多的论坛和网站,删除过top.htm里面的JS代码的,.htaccess文件的修改的,都没有解决,后来找到原因, 原 ...