Javascript 选项卡
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#div1 .active
{
background: yellow;
} #div1 div
{
width: 200px;
height: 200px;
background: #808080;
border: 1px solid #f00;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById("div1");
var aBtn = oDiv.getElementsByTagName("input");
var aDiv = oDiv.getElementsByTagName("div"); for (var i = 0; i < aBtn.length; i++) {
//给每一个按钮增加一个Index属性
aBtn[i].index = i;
//给按钮增加事件
aBtn[i].onclick = function () {
//先把所有的btn的class改成无
for (var j = 0; j < aBtn.length; j++) {
aBtn[j].className = '';
aDiv[i].style.display = 'none';
}
//当前点击的按钮是this
this.className = "active";
alert(this.index);
//aDiv[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" class="active" value="教育" />
<input type="button" value="培训" />
<input type="button" value="招生" />
<input type="button" value="出国" />
<div style="display: block">11111111</div>
<div>22222222</div>
<div>33333333</div>
<div>44444444</div>
</div>
</body>
</html>
Javascript 选项卡的更多相关文章
- javascript选项卡2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript选项卡/页签/Tab的实现
选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...
- JavaScript选项卡
实现js选项卡 html的代码如下: <div class="tabdiv"> <ul class="tabs" id="oTab& ...
- 原生javascript选项卡
js选项卡是一个常用的实现.这里我们将用原生js来将其给予实现. 首先html代码: <div id="container"> <input type=" ...
- javascript选项卡切换样式
HTML代码 <ul class="touzi_xuan1" id="qixian"> <li>****: </li> &l ...
- 用JS制作简易选项卡
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- 实用的Jquery选项卡TAB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 选项卡tab2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- easyui---tabs(选项卡)
配置好easyui环境 1.笔记: tabs(选项卡) class:class="easyui-tabs" //<div class="easyui-tabs&qu ...
随机推荐
- 字符串反转（StringBuffer）
package com.java1234.chap03.sec08; public class zifufanzhuan { public static void main(String[] args ...
- Python数据结构——链表的实现
链表由一系列不必在内存中相连的结构构成,这些对象按线性顺序排序.每个结构含有表元素和指向后继元素的指针.最后一个单元的指针指向NULL.为了方便链表的删除与插入操作,可以为链表添加一个表头. 删除操作 ...
- 【Web学习日记】——在IIS上发布一个WebService
没有开发过程,只是发布过程 一.前提 开发使用的是VS2013 从来没有做过Web的发布,在网上找例子,看到的总是与自己的情况不相符,而且也有人提出了VS2013发布网站的问题,但解决方案却很少,好不 ...
- Configure Log Shipping
准备工作 两台装有的Windows Server 2012R2以及SQL Server 2012的服务器 下载评估版 Windows Server 2012 R2 下载 Microsoft SQL S ...
- Redis 代理服务Twemproxy
1.twemproxy explore 当我们有大量 Redis 或 Memcached 的时候,通常只能通过客户端的一些数据分配算法(比如一致性哈希),来实现集群存储的特性.虽然Redis 2.6版 ...
- Error:/etc/fstab:Read-only file system错误的解决办法
1.挂载60T存储,设置开机自动挂载,UUID编号配置错误导致系统无法启动 2.根据提示进入维护状态,输入root密码,进入fstab删除UUID等内容,结果报错 Error:/etc/fst ...
- [原创]PostgreSQL Plus Advince Server在 HA环境中一对多的Stream Replication配置（一）
内容较多,开篇作为说明和目录. 实验环境规划:服务器:IBM x3500 m3三台其中两台用作HA,另外一台安装VMware ESXi安装两个虚机做Stream Replication.NAS存储IP ...
- usb wifi driver run in ubuntu support 360/xiaodu and with 3.13.0-32-generic
(为了实现usb-wifi用在linux系统上,需求解决方案,过程记录和如何实现) 重点解决3.13.0-32-generic内核编译 mt7601 usb wifi 驱动问题. 1:首先下载MT76 ...
- C# Socket连接请求超时机制
作者:RazanPaul 译者:Todd Wei 原文:http://www.codeproject.com/KB/IP/TimeOutSocket.aspx 介绍 您可能注意到了,.Net的Syst ...
- return的用法
1.一般的就是用在有返回值的方法中,用来返回方法指定类型的值,同时结束方法执行: 2.可以用在返回值为void的方法中,用来终止方法运行: