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 ...
随机推荐
- BootStrap学习2 typeahead
首先看看这些 http://www.wrapcode.com/bootstrap/typeahead-json-objects/ http://stackoverflow.com/questions/ ...
- 算法导论 6-2 d叉堆
问题: d叉堆性质与二叉堆相似,但其每个非叶子结点有d个孩子: 1) 如何在一个数组中表示一个d叉堆? 2) 包含n个元素的d叉堆的高度是多少? 3) 给出 EXTRACT-MAX在d叉堆的有效实现, ...
- Poj 2232 Moo Volume(排序)
题目链接:http://poj.org/problem?id=2231 思路分析:先排序,再推导计算公式. 代码如下: #include <iostream> #include <a ...
- 十一、观察者模式(Observable、Observer)
老板出差了,员工1.员工2..均放羊中.他们请求前台的秘书,当老板回来时通知自己,免得被Boss抓个现行.秘书想了想,说————嗯,这是观察者模式. 当一个对象的改变需要同时改变其它对象,而且它不知道 ...
- Android的电源管理框架
Android的电源管理框架 Android通过锁和定时器来切换系统的状态,使系统的功耗降至最低,整个系统的电源管理框架分成五个部分:应用层,framework层,JNI层,HAL层和内核层.电源管理 ...
- 关于移动端 rem 布局的一些总结
[资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...
- C#_会员管理系统:开发八(权限分配)
数据库设计 这里由于增加了普通用户权限值,我们需要对数据库结构稍作修改.这里在MovieAccount表中增加4列内容 分别用于 RightFManager 判断普通用户管理界面权限 ...
- 一些指令 & 一些知识 (Linux Spring log4j...)
#!/bin/sh myPath="/var/log/httpd/" myFile="/var /log/httpd/access.log" #这里的-x 参数 ...
- 转:requirejs:让人迷惑的路径解析(~~不错)
接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得 ...
- php 用户访问菜单页面,必须登录,判断用户是否登录
<pre name="code" class="python"># 本节课大纲: 一.空模块和空操作 1.空操作 function _empty($ ...