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 ...
随机推荐
- nodejs--express开发博客系统(三)
上一节已经实现了登录.注册.发表文章和文章读取的功能,今天咱加上评论.文章页面和作者页面. 评论只能在进入文章页面后才能进行,所以咱们先写文章页面. 在上一节的代码中,我已经给文章标题添加了超链接了, ...
- 用Jetty和redis实现接入服务器adapter
传统的服务器端为若干个客户端提供服务,一般需要开启多个服务器端进程.为了进一步提升服务器端的处理能力,可以如下图所示将服务解耦为两部分(adapter与workers),它们之间通过消息队列传输数据, ...
- lua协程并发下载简单测试
下载8个1m大小文件,测试五次分别耗时12.038s,10.316s,8.955s,11.275s,9.499s(lua代码实现如下) require "socket" --hos ...
- 基于表单的身份验证(FBA)
https://technet.microsoft.com/zh-cn/library/ee806890(office.15).aspx http://www.tuicool.com/articles ...
- Swift和OC 混编
1.首先创建一个Swift工程 2.导入或者创建一个OC文件(.h和.m) 3.再创建一个桥连接文件 4.然后文件样子为 5.在桥接链接里面导入头文件 6.通过targets->->bui ...
- 解决了clang: error: linker command failed with exit code 1 (use -v to see invocation) 解决方法
1.”Build Settings”->”Enable Bitcode”设置为NO 2.TARGETS --> Build Settings --> Architectures - ...
- iOS 项目中的NSNotification简单使用
iOS中NSNotification的简单使用 好久没有写过博客了,总是遇到问题查一下,今天查的又是一个老问题,想了想,还是记录一下!今天在项目开发中遇到一个配置及时性处理的问题,想了想之后决定用通知 ...
- LeetCode 链表的插入排序
Sort a linked list using insertion sort 创建一个新的链表,将旧链表的节点插入到正确的位置 package cn.edu.algorithm.huawei; pu ...
- 【MFC相关】图片显示
CPaintDC dc(this); if (!m_hBitmap) return; image.Attach(m_hBitmap); CRect rect; GetClientRect(&r ...
- 如何在Eclipse中配置Tomcat(免安装版)
如何在Eclipse中配置Tomcat(免安装版) 2013-10-09 23:19wgelgrsh | 分类:JAVA相关 | 浏览642次 分享到: 2013-10-10 17:10提问者采纳 ...