实现的是在鼠标悬停在不同链接上，在同一位置切换显示想要显示的内容
<!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命令（11）--nl命令

    nl命令在Linux系统中用来计算文件中行号.nl可以将输出的文件内容自动的加上行号,其默认的结果与cat -n 有点不太一样,nl可以将行号做比较多的显示设计,包括位数与是否自动不起0等等的功能. ...

  2. Flex 布局教程

    今天给大家分享一下flex布局的语法 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于 ...

  3. RunTime.getRuntime（）.exec（）运行脚本命令介绍和阻塞

     java在企业级项目开发中,无论是强制性的功能需要,还是为了简便java的实现,需要调用服务器命令脚本来执行.在java中,RunTime.getRuntime().exec()就实现了这个功能.  ...

  4. Eclipse-ee 启动Tomcat后浏览器无法访问Tomat，并且Web项目服务部署

    环境: Ubuntu 14.04 + Eclipse-ee +  Tomcat7 问题: 在Eclipse中建立Server时选择的Tomcat7,Server的运行时选择的时自己安装的Tomcat目 ...

  5. 分页控件AspNetPager学习笔记

    1.AspNetPager简介 AspNetPager是一款开源.简单易用.可定制化等等各种优点的Web分页控件. 2.使用方法 1)下载AspNetPager.dll文件(http://www.we ...

  6. 购买的wemall 6.0商城系统源码分享

    使用方法 1.解压目录 2.cd wemall6 && npm i 3.配置config下的config.json 4.npm start 摒弃以往的开发框架thinkphp,使用no ...

  7. 通过spring 中的@Scheduled来执行定时任务

    以前开发定时任务的功能的时候,是框架里面写好的quartz配置方式,由于功力尚浅,感觉定时跑披定时任务什么的云里雾里,很高大上,每次都不知道怎么修改配置,后来几次接触定时任务发现,还是比较好掌握的,特 ...

  8. 【转】Django中的request与response对象

    关于request与response 前面几个 Sections 介绍了关于 Django 请求(Request)处理的流程分析,我们也了解到,Django 是围绕着 Request 与 Respon ...

  9. 队列工厂之RedisMQ

    本次和大家分享的是RedisMQ队列的用法,前两篇文章队列工厂之(MSMQ)和队列工厂之RabbitMQ分别简单介绍对应队列环境的搭建和常用方法的使用,加上本篇分享的RedisMQ那么就完成了咋们队列 ...

  10. webots自学笔记（五）使用物理插件ODE建立铰链

    原创文章,来自"博客园,_阿龙clliu" http://www.cnblogs.com/clliu/,转载请注明原文章出处. 在一些三维制图软件或仿真软件里,都有运动副的概念,w ...