<style>
  #hhh div {    
    width:200px;
    height:200px;
    background:red;
    display:none;
    }

#hhh input {
        background-color: white;
    }
    #hhh .active
    {background-color:green;
     
    }
   
</style>

<div id="hhh">

<script >
    window.onload = function () {
        var abtn = $("input")
        var adiv = $("#hhh div");       
        var i = 0;        
        for (i = 0; i < abtn.length; i++)
        {
            abtn[i].index = i;
            abtn[i].onmousemove = function ()
            {
                for (i = 0; i < abtn.length; i++) {
                    abtn[i].className = "";
                    adiv[i].style.display = "none";
                };         
                adiv[this.index].style.display="block";
                this.className = "active";
            }
        }
    };

</script>
<input type="button" class="active" value="小杜" />
<input type="button" value="张旭"/>
<input type="button" value="赵帆"/>
    <div style="display:block">11111</div>
    <div>222222</div>
    <div>33333</div>
 </div>

JS 切换显示的更多相关文章

  1. 使用JS实现鼠标悬浮切换显示

    实现的是在鼠标悬停在不同链接上,在同一位置切换显示想要显示的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  2. js实现tab页面不同内容切换显示

    效果      实现的思路如下: controller层同时把两个内容都查处理 前端html用js控制显示 (1)前端的tab代码 (2)tab内容的结构 (3)关键部分 js $(".hd ...

  3. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  4. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  5. javascript DOM(2) 一个网页上切换显示不同的图片或文本

    摘自: javascript DOM 编程艺术 1. 在一个网页上切换显示不同的图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  6. web端实现图片放大切换显示预览

    项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能, 点击“查看协议” => 图片 ...

  7. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  8. leaflet-webpack 入门开发系列二加载不同在线地图切换显示(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  9. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

随机推荐

  1. Linux C网络编程学习笔记

    Linux C网络编程总结报告 一.Linux C 网络编程知识介绍: 网络程序和普通的程序有一个最大的区别是网络程序是由两个部分组成的--客户端和服务器端. 客户端:(client) 在网络程序中, ...

  2. 将dll放进exe[.Net]

    原文:将dll放进exe[.Net] 两种方案: 1.使用ILMerge工具. 缺点:需离开工程,使用第三方工具(ILMerge). 2.将dll作为Resource放进exe,exe执行时动态加载( ...

  3. (C#)Windows Shell 外壳编程系列6 - 执行

    原文(C#)Windows Shell 外壳编程系列6 - 执行 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windows Shell 外壳编程系列5 - ...

  4. 基于Visual C++2013拆解世界五百强面试题--题15-递归相加

    有一分数序列: 1/2 , 1/4 , 1/6 , 1/8 ......,用递归的方法,求此数列20项之和. 可以看出规律:每一项位1/n*2 这个很容易些递归,但是要注意一点,使用浮点数相除保存: ...

  5. jQuery EasyUI 数字框(NumberBox)用法

    这里的options是选项,可以参考下表: 选项名 类型 描述 默认值 min 数字 文本框中可允许的最小值 null max 数字 文本框中可允许的最大值 null precision 数字 最高可 ...

  6. STC12C5201AD AD采样+串口发送模板

    #include<reg52.h> sfr ADC_CONTR = 0xBC; //ADC control register sfr ADC_RES = 0xBD; //ADC 8-bit ...

  7. 【PAT】1009. Product of Polynomials (25)

    题目链接:http://pat.zju.edu.cn/contests/pat-a-practise/1009 分析:简单题.相乘时指数相加,系数相乘即可,输出时按指数从高到低的顺序.注意点:多项式相 ...

  8. javadoc入门

    斌斌 (给我写信) 原创博文(http://blog.csdn.net/binbinxyz),转载请注明出处! java凝视 java里面有两种类型的凝视.一种是以"/*"起头,以 ...

  9. Unity的NGUI插件篇——入场效果

    Unity的NGUI插件篇--入场效果 入场效果 入场效果须要借助于NGUI提供的TweenPosition类来完毕.为了说明此类的用法.本节将使会解说两个演示样例.本文选自  大学霸 <NGU ...

  10. js推断指定函数、变量是否存在的方法

    //推断是否存在指定函数 function isExitsFunction(funcName) { try { if (typeof (eval(funcName)) == "functio ...