JS 切换显示
<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 切换显示的更多相关文章
- 使用JS实现鼠标悬浮切换显示
实现的是在鼠标悬停在不同链接上,在同一位置切换显示想要显示的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- js实现tab页面不同内容切换显示
效果 实现的思路如下: controller层同时把两个内容都查处理 前端html用js控制显示 (1)前端的tab代码 (2)tab内容的结构 (3)关键部分 js $(".hd ...
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
- jquery实现tab页切换显示div
1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...
- javascript DOM(2) 一个网页上切换显示不同的图片或文本
摘自: javascript DOM 编程艺术 1. 在一个网页上切换显示不同的图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- web端实现图片放大切换显示预览
项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能, 点击“查看协议” => 图片 ...
- 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
- leaflet-webpack 入门开发系列二加载不同在线地图切换显示(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
随机推荐
- 在Linux中创建静态库和动态库 (转)
我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库两种.静态 库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.动态库在程序编译时并不会被连接到目标代码中,而 ...
- Lotus Sametime 服务器的安装和配置
IBM Lotus Sametime 是一款强大的实时协作软件,目前最新版本是 7.5.1.通过它,您不仅能够进行网络聊天,而且可以方便地召开网络会议.在网络社区中与其他人进行沟通.了解更多关于 Lo ...
- C++的二进制兼容问题(以QT为例)
二进制不兼容带来的问题(需要重新编译库文件,以前编译的失效): http://my.oschina.net/lieefu/blog/505363?fromerr=f5jn7rct 二进制不兼容的原理: ...
- Microsoft 收购 Apiphany
StevenMartinMS 2013 年 10 月 23 日上午 10:00 今天,我高兴地宣布我们收购了业界领先的 API 管理交付平台 - Apiphany. 应用程序可扩展性已经不算什么新鲜事 ...
- Objective-c @property和@Synthesize
在Objective-c中,使用@property来标识属性(一般是实例变量).在实现文件中使用@synthesize标识所声明的变量,让系统自动生成设置方法和获取方法. 也就是说@property和 ...
- Ext JS学习第七天 Ext自定义类,继承(二)
此文来记录学习笔记 一个简单ext继承的栗子 Ext.onReady(function () { Ext.define('Person',{ config:{ name:'z3' } , constr ...
- ADO.NET基础笔记
ADO.NET 程序要和数据库交互要通过ADO.NET进行,通过ADO.Net就能在程序中执行SQL了. ADO.Net中提供了对各种不同的数据库的统一操作接口. 连接字符串: 程序通过连接字符串指定 ...
- MVC DI
using System;using Microsoft.Practices.Unity; public class BizInstanceFactory { private static reado ...
- poj3693之后缀数组
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5946 Accepted: 1799 Description The r ...
- OSX/iOS 播放系统声音
方法1: 系统会自带了些声音,有时候一些操作用必要自己播放一下声音提醒一下,用bash的直接say something就ok了,写代码的时候呢?原来很简单的,一句: [[NSSound soundNa ...