代码

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
button{
width: 100px;
height: 40px;
background-color: #ccc;
border: none;
outline: none;
}
div{
background-color:red;
font-size: 40px;
font-weight: bold;
width: 200px;
height: 200px;
display: none;
}
</style>
</head>
<body>
<button style="background-color:orange">1</button>
<button>2</button>
<button>3</button>
<div style="display:block">1</div>
<div>2</div>
<div>3</div>
<script type="text/javascript">
var btnBox = document.getElementsByTagName('button');
var divBox = document.getElementsByTagName('div');
for(var i = 0,len=btnBox.length;i<len;i++){
//给每一个btn添加一个index属性
btnBox[i].index = i;
btnBox[i].onclick = function(){
// console.log(this.index);
for(var j = 0;j<len;j++){
btnBox[j].style.backgroundColor = "#ccc";
divBox[j].style.display = "none";
}
this.style.backgroundColor = "orange";
divBox[this.index].style.display = "block";
}
}
</script>
</body>
</html>

第2种方法：

<script type="text/javascript">
//获取节点
var btnBox = document.getElementsByTagName('button');
var divBox = document.getElementsByTagName('div');
//绑定事件,数组的长度,数组名.length
// for(var i = 0;i<btnBox.length;i++){
//
// }
for(var i = 0,len=btnBox.length;i<len;i++){
btnBox[i].onclick = function(){
for(var j = 0;j<len;j++){
// btnBox[j].style.backgroundColor = "#ccc";
if(this==btnBox[j]){
btnBox[j].style.backgroundColor = "orange";
divBox[j].style.display = "block";
}else{
btnBox[j].style.backgroundColor = "#ccc";
divBox[j].style.display = "none";
}
}
//谁调用，指的就是谁
// console.log(this);
// console.log(i); //3
// this.style.backgroundColor = "orange";
}
}

Tab切换的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  3. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  4. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  5. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  6. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

  8. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  9. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  10. tab切换-2016.6.4

    以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...

随机推荐

  1. 解决织梦DEDEcms指定arclist的特定ID排序的方法

    转载网址:http://blog.hrseo.net/xuexi/184.html 替换/include/taglib/arclist.lib.php这个文件,下载链接: http://pan.bai ...

  2. Django 创建APP简单步骤

    yum install epel-releaseyum install python34yum install python-pippip install django django-admin st ...

  3. #ifndef 的用法

    背景: 头件的中的#ifndef,这是一个很关键的东西.比如你有两个C文件,这两个C文件都include了同一个头文件.而编译时,这两个C文件要一同编译成一个可运行文件,会引起大量的声明冲突,这时候需 ...

  4. MongoDB学习笔记六：进阶指南

    [数据库命令]『命令的工作原理』MongoDB中的命令其实是作为一种特殊类型的查询来实现的,这些查询针对$cmd集合来执行.runCommand仅仅是接受命令文档,执行等价查询,因此,> db. ...

  5. JVM 参数分配

    http://stackoverflow.com/questions/41216388/java-jvm-parameter-xms-doesnt-take-effect-immediately It ...

  6. MySQL 5.7 并行复制实现原理与调优

    MySQL 5.7并行复制时代 众所周知,MySQL的复制延迟是一直被诟病的问题之一,然而在Inside君之前的两篇博客中(1,2)中都已经提到了MySQL 5.7版本已经支持“真正”的并行复制功能, ...

  7. golang开发环境(2016.9.16)

    一.windows下安装 1.下载go1.7.3.windows-amd64.msi,建议默认安装到‘C:\Go\’ 2.环境变量 变量 值 说明 Path C:\Go\bin 安装程序默认会设置,如 ...

  8. Nagios监控平台之一：在Centos上安装Nagios服务

    1.安装依赖包 #yum install httpd httpd-devel php openssl-devel #yum install gcc glibc glibc-common #yum in ...

  9. SQLAlchemy 几种查询方式总结

    转自:http://blog.csdn.net/shudaqi2010/article/details/51568219 几种常见sqlalchemy查询:#简单查询    print(session ...

  10. javascript——Array

    # js数组分为属性和方法 ## 属性 1.constructor返回对创建此对象的数组函数的引用. 这个其实在javascript中的对象都有 var a = [] console.log(a.co ...