<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. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  2. 高质量程序设计指南C/C++语言——C++/C程序设计入门(2)

    *标准C规定,编译器只取前31个字符作为有效的标识符,而标准C++则取前255个字符作为有效的标识符. *把具有特殊含义的字符输出到终端上,尤其是当它们出现在普通字符串或格式控制字符串中时,一般来说有 ...

  3. 在SQL2005中部署CLR 程序集

    原文 在SQL2005中部署CLR 程序集 有关于CLR函数的用途和用法,请了解 SQL Server CLR 极速入门,启用.设计.部署.运行 http://www.yongfa365.com/It ...

  4. java面试复习 I

    1 多线程 在程序开发中只要是多线程肯定永远以实现Runnable接口为主,因为实现Runnable接口相比继承Thread类有如下好处: 避免点继承的局限,一个类可以继承多个接口. 适合于资源的共享 ...

  5. Linux BFS简介

    1. 什么是BFS 这里的BFS可不是广度优先算法,本文介绍的BFS是Linux的一个非Linux mainline调度算法.根据作者的描述BFS能够极大的提高低端设备(这里的低端设备的定义为:CPU ...

  6. Swift:使用系统AVFoundation实现二维码扫描和生成

    系统提供的AVCaptureSession仅仅适用于iOS7.0以上的系统.之前的请用Zbar来替代 下载地址:http://download.csdn.net/detail/huobanbengku ...

  7. 【转】windows上自动设置java环境变量的脚本

    转载:http://www.cnblogs.com/flowwind/p/4066146.html 近期打算学习安卓开发,于是乎要准备java开发环境,安装好jdk后,就要 设置java环境变量,ja ...

  8. [Swust OJ 795]--Penney Game

    题目链接:http://acm.swust.edu.cn/problem/795/ Time limit(ms): 1000 Memory limit(kb): 65535   Description ...

  9. SPOJ8222 Substrings( 后缀自动机 + dp )

    题目大意:给一个字符串S,令F(x)表示S的所有长度为x的子串中,出现次数的最大值.F(1)..F(Length(S)) 建出SAM, 然后求出Right, 求Right可以按拓扑序dp..Right ...

  10. CXF 开发 WebService

    什么是CXF: Apache CXF = Celtix + Xfire 支持多种协议: SOAP1.1,1.2 XML/HTTP CORBA(Common Object Request Broker ...