选项卡在各种网站网页上是随处可见的一种形式 今天就简单的讲解下 选项卡得制作方法

首先：思路；

我们做一个四个控制的选项卡  则应该有四个小的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控制的选项卡的更多相关文章

  1. js进阶 11-22/23 js如何实现选项卡

    js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...

  2. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  3. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...

  4. JS控制flash的方法

    JS控制flash的一些方法:Play() ---------------------------------------- 播放动画 StopPlay()---------------------- ...

  5. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)

    验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数 ...

  7. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  8. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  9. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

随机推荐

  1. react系列笔记1 用npx npm命令创建react app

    react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...

  2. 关于数据库主从表、主键PRIMARY KEY 外键约束 FOREIGN KEY 约束----NOT NULL,DEFAULT,CHECK

    如果由两个列共同组成主键,而且一个子表将主键作为可为空值的外键来继承,就可能得到错误的数据.可在一个外键列中插入有效的值,但在另一个外键列中插入空值.然后,可添加一个数据表检查约束,在可为空的外键中检 ...

  3. JS 和 Jquery 的一些常用效果

    https://www.cnblogs.com/beiz/tag/%E7%BD%91%E9%A1%B5%E5%B8%B8%E8%A7%81%E6%95%88%E6%9E%9C/   北执

  4. C++形参中const char * 与 char * 的区别

    在函数调用时,我们经常看见一个函数的接受参数为(const char *); 例如strlen()函数,它的定义为: size_t strlen( const char *str); 那么将形参设置为 ...

  5. shell 多行注释 块注释

    转自 https://www.cnblogs.com/emanlee/p/3749911.html 1 : ' 被注释的多行内容 ' 2 :<<eof 被注释的多行内容 eof 3 :&l ...

  6. nginx 启动 + uwsgi + django

    https://www.cnblogs.com/chenice/p/6921727.html https://blog.csdn.net/Aaroun/article/details/78218131

  7. P2590 [ZJOI2008]树的统计（树链剖分）

    P2590 [ZJOI2008]树的统计 虽然是入门树剖模板 但是我终于1A了(大哭) 懒得写啥了(逃 #include<iostream> #include<cstdio> ...

  8. mybatis 3.2.*打印sql结果集

    虽然可以写个interceptor记录下,但是总归没有log4j来的自然.一段时间不查问题,总是要忘了,记录下: 在mybatis 3.2.*中,可以在log4j中如下配置: log4j.logger ...

  9. 03：git常见报错解决方法

    1.1 git常见报错解决方法 1.warning: LF will be replaced by CRLF in .idea/workspace.xml. 参考博客:https://www.cnbl ...

  10. 集合框架-Map集合

    * Map集合和Collection集合的区别? * Map集合存储元素是成对出现的,Map集合的键是唯一的,值是可重复的.可以把这个理解为:夫妻对 * Collection集合存储元素是单独出现的, ...