代码

<!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. 用python+selenium抓取微博24小时热门话题的前15个并保存到txt中

    抓取微博24小时热门话题的前15个,抓取的内容请保存至txt文件中,需要抓取排行.话题和阅读数 #coding=utf-8 from selenium import webdriver import ...

  2. button标签和input button

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  3. Activity的Launch Mode

    ANDROID四种启动模式: 1.standard:默认的启动模式,每次新建一个实例对象. 2.singleTop:如果在任务栈顶发现了相同的实例则复用该实例,否则新建一个实例并压入栈顶. 3.sin ...

  4. Rxjava的基本使用

    gradle配置: compile 'io.reactivex:rxjava:1.0.9' 观察者: Observer<String> observer = new Observer< ...

  5. 【转载】Python的包管理工具Pip

    接触了Ruby,发现它有个包管理工具RubyGem很好用,并且有很完备的文档系统http://rdoc.info 发现Python下也有同样的工具,包括easy_install和Pip.不过,我没有细 ...

  6. Spring 发送 Email

    本文转自:http://zl198751.iteye.com/blog/757617 看到了本文,收获颇丰,感谢之至! 首先介绍下Email的发送流程: 需要选中smtp邮件服务器,Yahoo不提供免 ...

  7. java验证码前台技术

    //下面是在前台jsp页面不用导工具的情况下制作的验证码的基本代码 $(function(){ //创建验证码 createCode(); jQuery.validator.addMethod( &q ...

  8. 浅谈VB.Net 程序的编译和动态编译

    ---恢复内容开始--- 一般,我们都是通过Visual Studio(下面简称vs)来编写和编译vb.net应用程序的,但是,不少的人并不知道vs是通过何种方式编译程序的.今天,我们就来探讨一下编译 ...

  9. Linear Algebra lecture4 note

    Inverse of AB,A^(A的转置) Product of elimination matrices  A=LU (no row exchanges)   Inverse of AB,A^(A ...

  10. 听桶哥讲session和cookie

    首先,cookie和session是什么关系? 他们的关系很简单,利用和被利用的关系. 话说,由于http协议的无状态特性,同一client两个不同的请求之间完全独立,没有很好的办法进行一些数据共享, ...