<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. selenium 学习笔记 ---新手学习记录(1) 问题总结

    说明:每次学习各种语言时,环境搭建访问国外网址最头疼了,现在只要是工具下载好放到自己网盘,可以随时用. 1.首先工具准备,selenium需要用到的 下载地址 访问密码 ff8f 2.我选择的语言时j ...

  2. USB3.0 和usb 2.0的区别

    USB3.0拥有10倍于USB2.0的速度,可惜DIY“江湖”险恶,如果咱们不掌握如何识别USB3.0的方法,很容易被JS忽悠.何况,USB3.0主板不等于USB3.0机箱,很多朋友在选购时都忽略了一 ...

  3. css3: css3选择器

    --------------------css3选择器-------------------------css3属性选择器  ~~属性选择器基本上ie7+都支持,可以相对放心的使用 见: www.ca ...

  4. QQwry

    http://blog.runphp.net/archives/156 http://wenku.baidu.com/link?url=yvd3_EpMM66r6H4qkx3oqcaU2JZNAQv_ ...

  5. Python单元测试:unittest使用简介

    一.概述 本文介绍python的单元测试框架unittest,这是Python自带的标准模块unittest.unittest是基于java中的流行单元测试框架junit设计的,其功能强大且灵活,对于 ...

  6. php订单生成唯一Id

    一般用到一个函数: uniqid(prefix,more_entropy) 参数 描述 prefix 可选.为 ID 规定前缀.如果两个脚本恰好在相同的微秒生成 ID,该参数很有用. more_ent ...

  7. weblogic的ejb远程调用

    这是一篇对EJB远程调用的简单范例.      1.环境:win7  + weblogic 12c + myeclipse8.5      2.目的:实现在myeclispe中对weblogic中EJ ...

  8. Android.mk的用法和基础

    一个Android.mk file用来向编译系统描述你的源代码.具体来说:该文件是GNU Makefile的一小部分,会被编译系统解析一次或多次.你可以在每一个Android.mk file中定义一个 ...

  9. java多线程——同步块synchronized详解

    Java 同步块(synchronized block)用来标记方法或者代码块是同步的.Java同步块用来避免竞争.本文介绍以下内容: Java同步关键字(synchronzied) 实例方法同步 静 ...

  10. Intellij IDEA 常用 设置 及 快捷键 (持续更新)

    Transparent native-to-ascii conversion以下设置都可以通过 设置中的搜索框 进行关键字搜索 0, 打开Project 设置 Command + ; 1, 打开Mod ...