代码

<!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. js +1的动画效果

    var fnPlusAnimate = function(str, options){ if (typeof str === 'object') { options = str; str = unde ...

  2. DNS记录类型介绍(A记录、MX记录、NS记录等)

    DNS A记录 NS记录 MX记录 CNAME记录 TXT记录 TTL值 PTR值 建站名词解释:DNS A记录 NS记录 MX记录 CNAME记录 TXT记录 TTL值 PTR值 泛域名 泛解析 域 ...

  3. Linux 中断处理浅析

    最近在研究异步消息处理, 突然想起linux内核的中断处理, 里面由始至终都贯穿着"重要的事马上做, 不重要的事推后做"的异步处理思想. 于是整理一下~ 第一阶段--获取中断号 每 ...

  4. C++ 虚函数，纯虚函数的一些问题

    #include <iostream> using namespace std; #define cendl cout << endl; class AA{//这是一个纯虚函数 ...

  5. pyodbc不支持使用%，应该使用？

    pyodbc不支持使用%,应该使用? 如: Sql插入语句cur.execute("INSERT INTO bb VALUES (?,?,?)","s",&qu ...

  6. 跨服务器的session共享

    四种 一.NFS(Net FileSystem): sun公司提供的,并发处理的效率不高,但操作方便 二.基于数据库的session共享 三.基于cookie的session共享 原理:将sessio ...

  7. bn

    BN是在每一层之前对神经元的输入进行归一化,对sigmoid激活函数有效(对Relu也有效),可以更快的收敛且可以有效减少过拟合.

  8. 最近这两天看了关于H5游戏开发的一个教程，实践很短暂，看了很多理论的东西，现在呢也只是想回忆回忆关于EUI的部分知识吧

    首先我了解了什么是Egret: Egret中文就是白鹭的意思,Egret是一套H5游戏开发的软件.(纯粹属于个人理解) 其次我对以下几款软件的相关知识做了些了解: Egret Engine(引擎),E ...

  9. html中的空格显示问题

    像这种,从后台查询出来的数据中间有好几个空格,但在页面上显示的时候就只剩一个空格了,这种显示肯定是不合适的,相关的html代码如下: <c:forEach items="${list} ...

  10. Java数据类型、变量、运算符、语句。

    数据类型:整型 int long short byte小数 double float 字符 char 转义字符:\'(单引号字符) \\(反斜杠字符) \n(换行) \r(回车) \t(水平制表符,相 ...