js控制的选项卡
选项卡在各种网站网页上是随处可见的一种形式 今天就简单的讲解下 选项卡得制作方法
首先：思路；
我们做一个四个控制的选项卡 则应该有四个小的DIV 外边包裹着一个大的div 用四个input按钮来控制四个小的div
html部分：-------------------------------------------------------
<body>
<div id="div1">
<input type="button" value="教育" class="active"/>
<input type="button" value="培训"/>
<input type="button" value="招生"/>
<input type="button" value="出国"/>
<div style="display:block">11</div>
<div>22</div>
<div>33</div>
<div>44</div>
</div>
</body>
--------------------------------------------------------------------
因为网页刚刷新出来给予第一个按钮和第一个div样式
下面是CSS部分：
让其他的小的div先影藏起来 显示第一个 并且给予其基础样式
因为按钮的变化不是很大 所以给予一个激活状态的class样式
--------------------------------------------------------------------
<style>
#div1 .active{
background-color:yellow;
}
#div1 div{
width:200px;
height:300px;
background-color:red;
border:1px solid silver;
display:none;
}
</style>
-----------------------------------------------------------------
最后是JavaScript部分：
<script>
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++){ //已循环的方式给予每个按钮事件
aBtn[i].onclick=function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;//js添加序号
aBtn[i].className='';//先让全部为空
aDiv[i].style.display='none';//选项卡不显示
}
this.className='active';//添加class样式 当前按钮显示
aDiv[this.index].style.display='block'; 当前div显示
}
}
};
</script>
---------------------------------------------------------------
js控制的选项卡的更多相关文章
- js进阶 11-22/23 js如何实现选项卡
js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...
- js控制Bootstrap 模态框（Modal）插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
- js控制文本框只能输入中文、英文、数字与指定特殊符号.
先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...
- JS控制flash的方法
JS控制flash的一些方法:Play() ---------------------------------------- 播放动画 StopPlay()---------------------- ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)
验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数 ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示
js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
随机推荐
- 实现私有化（Pimpl） --- QT常见的设计模式
转载自:http://blog.sina.com.cn/s/blog_667102dd0100wxbi.html 一.遇到的问题 1.隐藏实现 我们在给客户端提供接口的时候只希望能暴露它的接口,而隐藏 ...
- Matlab基础部分2-数组和矩阵分析
矩阵块操作: 矩阵尺寸改变: 矩阵的查找: 矩阵的排序: 矩阵求和: 矩阵的求积: 矩阵的差分: 全零矩阵: 单位矩阵: 随机矩阵: 伴随矩阵: 方针行列式计算: 特征值: 对角矩阵: 三角矩阵: 矩 ...
- [转载]FileStream读写文件
FileStream读写文件 FileStream类:操作字节的,可以操作任何的文件 StreamReader类和StreamWriter类:操作字符的,只能操作文本文件. 1.FileStream类 ...
- winscp中使用sudo的方法
用截图了解如何在 WinSCP 中使用 sudo. 首先你需要检查你尝试使用 WinSCP 连接的 sftp 服务器的二进制文件的位置.你可以使用以下命令检查 SFTP 服务器二进制文件位置: [ro ...
- yield的理解
yield的理解:yield命令是异步两个阶段的分界线需要先对迭代器和生成器进行理解: 迭代器:是一种支持next()操作的对象.它包含一组元素,当执行next()时,返回其中一个元素:当所有元素都被 ...
- Wisdom RESTClient支持自动化测试并可以生成API文档
Wisdom REST Client V1.2 支持自动化测试RESTful API并生成精美的测试报告,同时基于历史数据自动生成精美的RESTful API文档. 工具地址:https://gith ...
- Eloquent JavaScript #13# HTTP and Forms
索引 Notes fetch form focus Disabled fields form’s elements property 阻止提交 快速插入单词 实时统计字数 监听checkbox和rad ...
- Python Selenium element is not reachable by keyboard
碰到这个问题,没法解决, 最后这么搞的 pcAction.move_by_offset(571, 534).click().perform() #激活输入框 driver.switch_to.acti ...
- MySql概念（二）
一.Sql规范? sql是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言. 在使用它时,只需要发出“做什么 ...
- oracle安全应用角色例子
今天在做看OCP的时候有道题是关于应用安全角色的,不是很明白,在网上找了个例子按照步骤验证了下.QUESTION 48You want to create a role to meet these r ...