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 ...
随机推荐
- IOS 特定于设备的开发:UIDevice
UIDevice类展示了一些关键的特定于设备的属性,包括使用的iPhone ,Ipad或iPod Touch型号.设备名称.以及OS名称和版本. 他是一种一站式解决方案,用于提取出某些系统详细信息.每 ...
- 关于JVM的GC机制
GC优点: 1.提高生产率,不用逐行检查内存是否释放. 2.Java安全策略的一部分,不会使用户错误释放内存而导致JVM崩溃. GC算法基本两点: 1.检测出垃圾对象. 2.回收垃圾对象,释放相应堆空 ...
- S70卡
产品名称:Mifare 4K(S70)卡 芯片类型:Philips Mifare 1 S70(MOA2) 存储容量:32Kbit,32个分区,每分区两组密码 工作频率:13.56 MHz 通讯 ...
- HDU 2673 shǎ崽 OrOrOrOrz
#include <cstdio> #include <algorithm> using namespace std; int main() { int n; while (s ...
- JAVA面试中的几个重要基础问题
1.java是否会出现内存溢出?如何解决? 内存溢出是指应用系统中存在无法回收的内存或使用的内存过多,最终使得程序运行要用到的内存大于虚拟机能提供的最大内存.为了解决Java中内存溢出问题,我们首先必 ...
- lua的前景??
除了专业的游戏公司,貌似很少人在用lua来做开发啊,国内的lua社区越来越不行了. lua还在不断的发展,但每次新版本c接口都改动很大,项目想要升级有点困难啊. lua还有前途吗?
- WPF 自定义TextBox
1.TextBox前加图标. 效果: <TextBox Width="300" Height="30" Style="{StaticResour ...
- 先登录 在跳转到tabBar
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...
- 【示例代码】HTML+JS 画图板源码分享
一个有趣的画图板, 用了 HTML5中的本地存储.下载.canvas 等技术,这个项目中用到了canvas 的很多基础功能,初学者可以学习一下 . 建议开发童鞋使用统一开发环境UDE来进行查看.调试. ...
- JS于,子类调用父类的函数
概要 JS虽然没有直接有面向对象的特性,但还是能prototype为了模拟面向对象的特性,如继承和多态.而大多数面向对象的语言(例如C++.Java等一下)相比,JS为了实现面向对象还是有点繁琐,抽象 ...