实现的是在鼠标悬停在不同链接上，在同一位置切换显示想要显示的内容
<!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. Html5 基础－－－－列表详述

    html5列表 标签 列表分为:  有序列表/无序列表/自定义列表,用的最多的为无序列表和自定义列表 1.有序列表(order list) eg:把

  2. 算法模板——Dinic网络最大流 1

    实现功能:同sap网络最大流 今天第一次学Dinic,感觉最大的特点就是——相当的白话,相当的容易懂,而且丝毫不影响复杂度,顶多也就是代码长个几行 主要原理就是每次用spfa以O(n)的时间复杂度预处 ...

  3. 1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏

    1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 424  Solved: 272 ...

  4. （1）写给Web初学者的教案-----学习Web的知识架构

    1:学习Web的知识架构 前文中我们简单的介绍了一些关于Web的基本知识,这里任老师再次强调一下凡是用浏览器打开的网站我们就称之为Web应用程序(B/S结构).除此之外其它需要下载安装的软件或是手机  ...

  5. kali linux 忘记root密码重置办法

    有段时间没用kali linux 的,加上最近装的系统有比较多,系统root的密码忘掉了,真是麻烦啊.之前在网上看到的一些方法尝试后没进的去,可能是因为不同的linux 不一样吧. 如果因为忘记密码而 ...

  6. IIS HTTP 错误 500.19 - Internal Server Error HTTP 错误 401.3 - Unauthorized 解决办法

    前言:IIS是一个强大的服务器管理器,当遇到 IIS HTTP 错误 500.19 - Internal Server Error  HTTP 错误 401.3 - Unauthorized 的解决办 ...

  7. Java第一次作业

    (一)学习总结 1.在java中通过Scanner类完成控制台的输入,Scanner类实现基本数据输入的方法是什么? import java.util.Scanner; System.out.prin ...

  8. (1) 类构造块，this(),static，单例模式串讲

    类构造块 在类只用一对大括号包含的内容,构造所有的对象时都会执行的内容,如果某个类有好几个够赞函数,公共部分抽取出来,放到构造块中. clas Boy { ... { syso("哭...& ...

  9. [原创]HBase学习笔记（3）- Java程序访问HBase

    这里介绍使用java api来访问和操作HBase,例如create.delete.select.update等操作. 1.HBase配置 配置HBase使用的zookeeper集群地址和端口. pr ...

  10. 设置EditText控件中提示消息hint的字体颜色和大小

    设置EditText控件中提示消息hint的字体颜色和大小 1.设置字体大小 代码例: public void init(){ hint= (EditText) findViewById(R.id.i ...