代码

<!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. git学习：关于origin和master

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2016/10/27 本文主要是对这篇博客文章的理解. git的服务器端(remote)端包含多个repository, ...

  2. Eclipse下maven使用嵌入式（Embedded）Neo4j创建Hello World项目

    Eclipse下maven使用嵌入式(Embedded)Neo4j创建Hello World项目 新建一个maven工程,这里不赘述如何新建maven工程. 添加Neo4j jar到你的工程 有两种方 ...

  3. HTC One M7简易刷Recovery教程

          HTC One M7作为当下HTC旗下的旗舰热门机,用户们对于刷机的需求都比较强烈,对于刷ROM的前提就是要刷入Recovery,当然作为安卓智能手机HTC one而言也不例外,最近有些用 ...

  4. HDU 5446 中国剩余定理+lucas

    Unknown Treasure Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...

  5. 【转】JavaScript获取节点类型、节点名称和节点值

    DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...

  6. 今天第一次接触到typescript，看了第一个知识点就是变量的声明，来回忆回忆，做做笔记

    以前只用过JavaScript原生写网站特效,今天还是第一次听说typescript的,然后看了一下它的基本知识,感觉很像Java,真的太像了,但是又有不同点.很让我惊奇看到的第一个知识点就和以前不同 ...

  7. webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。

    webpack: plugins:[ new webpack.optimize.UglifyJsPlugin({ compress:{warning:true} }) ] 是的,一些dead code ...

  8. 如何解决 win10连了VPN怎么上外网

    当前用户配置%AppData%\Microsoft\Network\Connections\Pbk与所有用户共享配置%ProgramData%\Microsoft\Network\Connection ...

  9. tar命令

    # tar -cvf /usr/local/auto_bak/test.tar /usr/local/test 仅打包,不压缩 # tar -zcvf /usr/local/auto_bak/test ...

  10. 《java编程思想》读书笔记（一）开篇&第五章(1)

    2017 ---新篇章  今天终于找到阅读<java编程思想>这本书方法了,表示打开了一个新世界. 第一章:对象导论 内容不多但也有20页,主要是对整本书的一个概括.因为已经有过完整JAV ...