实现的是在鼠标悬停在不同链接上，在同一位置切换显示想要显示的内容
<!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. Linux 下查看CPU的使用情况

    1.top使用权限:所有使用者使用方式:top [-] [d delay] [q] [c] [S] [s] [i] [n] [b]说明:即时显示process的动态d :改变显示的更新速度,或是在交谈 ...

  2. 2017-3-5 C#基础 函数

    函数/方法:非常抽象独立完成某项功能的一个个体 函数的作用: 提高代码的重用性提高功能开发的效率提高程序代码的可维护性 函数分为: 固定功能函数高度抽象函数 函数四要素:输入,输出,函数体,函数名 p ...

  3. 利用smarty模板（登录、有关信息操作等功能）

    smarty模板前提是:前端和后端是分开的,所以肯定会有很多的后台页面,php页面和html页面是分开存储的. (1)登录页面的编写也是分两个页面(后台和前端) 1.首先是后台的php页面,很简单只要 ...

  4. Robot Framework中经常用的第三方库的安装方法

    pip升级:python -m pip install --upgrade pip 一.安装robotframework-selenium2library,相当于python中的selenium    ...

  5. vuejs数据双向绑定原理（get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  6. 一篇文章为你深度解析HTTPS 协议

    一.前言 微信小程序如期发布,开发者在接入微信小程序过程中,会遇到以下问题: 小程序要求必须通过 HTTPS 完成与服务端通信,若开发者选择自行搭建 HTTPS 服务,那需要自行 SSL 证书申请.部 ...

  7. [HDU2037]贪心入门

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  8. cocos2dx 魔塔项目总结（一）

    <魔塔天城>发布已经有半年的时间了,一直想找时间来总结一下这个项目,但总是一拖再拖.如果再这么拖下去,就永远都不会有时间来写这个总结了,时间总是挤出来的. 魔塔天城使用的cocos2dx ...

  9. 基于Spring-WS的Restful API的集成测试

    在很多Java企业级应用中,Spring占据了非常重要的位置,这就导致了基本上的技术选型都是围绕着Spring来, 比方说笔者最近的项目需要开发一个Restful的API接口,选型的时候就说,客户架构 ...

  10. Centos 搭建LAMP环境

    1.安装Apache yum install httpd 相关命令: systemctl start httpd.service #启动apache systemctl stop httpd.serv ...