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 ...
随机推荐
- 13个SQL优化技巧
避免无计划的全表扫描<!--?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" ...
- jquery 1.6发布后，增加prop()方法部分取代attr()方法
以前的jq中,全部使用attr来访问对象的属性,比如取一个图片的alt属性,就可以这样做$('#img').attr('alt'); 但是在某些时候,比如访问checkbox的disabled属性 ...
- WordPress 主题开发 - (三) 开发工具 待翻译
Before we get started building any WordPress Theme, we’re going to need to get our development tools ...
- Delphi XE5教程8：使用Delphi命名空间
// Project file declarations... //项目文件声明… program MyCompany.ProjectX.ProgramY; // Unit source file d ...
- 用python实现两个文本合并
一段时间前在网上看到一段面试题,要求如下: employee文件中记录了工号和姓名 cat employee.txt: 100 Jason Smith 200 John Doe 300 Sanjay ...
- 1105. Spiral Matrix (25)
This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...
- SQL左连接、右连接和内连接的简单示例
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录: right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录: inner join(等值连接 ...
- BootLoader作用
BootLoader 是系统加电后运行的第一段代码.一般它只在系统启动时非常短的时间内运行. 由OS Loader负责将所要引导的操作系统的内核映象从硬盘上读到系统RAM中,然后跳转到内核的入口点上. ...
- [原创]PostgreSQL Plus Advanced Server配合crontab实现定时维护工作
本文要实现的目标1.PostgreSQL定时全备2.定时删除归档WAL文件3.定时删除全备文件4.删除n天之前的数据库日志文件 实验环境操作系统:RHEL 6.3数据库:PostgreSQL Plus ...
- Ubuntu修改屏幕默认亮度
sudo gedit /etc/default/grub 把GRUB_CMDLINE_LINUX="" 改成GRUB_CMDLINE_LINUX="acpi_backli ...