JavaScript 几种简单的table切换
方法一：for循环+if判断当前点击与自定义数组是否匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style type="text/css">
button {
width:120px;
height: 32px;
line-height: 32px;
background-color: #ccc;
font-size: 24px;
}
div {
display: none;
width:200px;
height: 200px;
font-size: 72px;
color:#ddd;
background-color: green;
border:1px solid black;
}
</style>
</head>
<body>
<button style="background-color: yellow;">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<div style="display:block;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
//定义数组并获取数组内各个的节点
var buttonArr = document.getElementsByTagName("button");
var divArr = document.getElementsByTagName("div");
for(var i = 0; i < buttonArr.length;i++) {
buttonArr[i].onclick = function() {
//this
// alert(this.innerHTML)
//for循环遍历button数组长度
for(var j = 0; j < buttonArr.length; j++) {
//重置所有的button样式
buttonArr[j].style.backgroundColor = "#ccc";
//给当前的(点击的那个)那个button添加样式
this.style.backgroundColor = "yellow";
//隐藏所有的div
divArr[j].style.display = "none";
//判断当前点击是按钮数组中的哪一个？
if(this == buttonArr[j]) {
// alert(j);
//显示点击按钮对应的div
divArr[j].style.display = "block";
}
}
}
}
</script>
</body>
</html>
方法二：自定义index为当前点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style type="text/css">
button {
width:120px;
height: 32px;
line-height: 32px;
background-color: #ccc;
font-size: 24px;
}
div {
display: none;
width:200px;
height: 200px;
font-size: 72px;
color:#ddd;
background-color: green;
border:1px solid black;
}
</style>
</head>
<body>
<button style="background-color: yellow;">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<div style="display:block;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
var buttonArr = document.getElementsByTagName("button");
var divArr = document.getElementsByTagName("div");
for(var i = 0; i < buttonArr.length;i++) {
buttonArr[i].index = i;
// buttonArr[i].setAttribute("index",i);
buttonArr[i].onclick = function() {
for(var j = 0; j < buttonArr.length; j++) {
buttonArr[j].style.backgroundColor = "#ccc";
buttonArr[this.index].style.backgroundColor = "yellow";
divArr[j].style.display = "none";
divArr[this.index].style.display = "block";
}
}
} </script>
</body>
</html>
方法三：className
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style type="text/css">
* {padding:0; margin:0;}
button {
background-color: #ccc;
width:80px;
height: 30px;
}
.btn-active {
background-color: yellow;
font-weight:bold;
font-size: 14px;
}
div{
width:200px;
height: 200px;
font-size: 64px;
background-color: #0c0;
display: none;
color:#fff;
}
.div-active {
display: block;
}
</style>
</head>
<body>
<button class="btn-active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<div class="div-active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
//1.先获取元素
var buttonList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");
//2.添加事件
for(var i = 0; i < buttonList.length; i++) {
buttonList[i].index = i;
buttonList[i].onclick = function() {
for(var j = 0; j < buttonList.length;j++) {
buttonList[j].className = "";
divList[j].className = "";
}
this.className = "btn-active";
divList[this.index].className = "div-active";
}
}
</script>
</body>
</html>
方法四：className+匿名函数的自执行！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style type="text/css">
* {padding:0; margin:0;}
button {
background-color: #ccc;
width:80px;
height: 30px;
}
.btn-active {
background-color: yellow;
font-weight:bold;
font-size: 14px;
}
div{
width:200px;
height: 200px;
font-size: 64px;
background-color: #0c0;
display: none;
color:#fff;
}
.div-active {
display: block;
}
</style>
</head>
<body>
<button class="btn-active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<div class="div-active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
//1.先获取元素
var buttonList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");
//2.添加事件
for(var i = 0; i < buttonList.length; i++) {
(function(i){ //匿名函数自执行
buttonList[i].onclick = function() {
for(var j = 0; j < buttonList.length;j++) {
buttonList[j].className = "";
divList[j].className = "";
}
this.className = "btn-active";
divList[i].className = "div-active";
}
})(i)
}
</script>
</body>
</html>
JavaScript 几种简单的table切换的更多相关文章
- 使用JavaScript几种简单的排序
前几天在工作碰到一个json对象排序的问题,一直认为JavaScript不能进行对象的排序,其实并不是,今天就来总结下常见的几种简单排序: 第一类 纯数字: var arrOld = [4,10,9, ...
- JavaScript简单的tabel切换2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一种简单快速的模板解析方法，活用with javascript版
//一种简单快速的模板解析方法,活用with var parseTpl = function( str, data ) { var tmpl = 'var __p=[];' + 'with(obj|| ...
- 一种简单,轻量,灵活的C#对象转Json对象的方案(续)
本文参考资料 一种简单,轻量,灵活的C#对象转Json对象的方案 [源码]Literacy 快速反射读写对象属性,字段 一段废话 之前我已经介绍了这个方案的名称为JsonBuilder,这套方案最大的 ...
- JavaScript 一种轻量级的编程语言
JavaScript 一种轻量级的编程语言 作为一名计算机应用专业的学生,大一上学期开始接触了网页设计和制作,刚开始时感觉做网页很不错,简单地写几行代码就能做出效果来,当时感觉很兴奋,渐渐的喜欢上它 ...
- JavaScript学习笔记（一）：介绍JavaScript的一些简单知识
JavaScript是世界上最流行的编程语言.这门语言可用于HTML和web,更可广泛用于服务器.PC.笔记本电脑和智能手机等设备.---------------------------------- ...
- Perl，Python，Ruby，Javascript 四种脚本语言比较
Perl 为了选择一个合适的脚本语言学习,今天查了不少有关Perl,Python,Ruby,Javascript的东西,可是发现各大阵营的人都在吹捧自己喜欢的语言,不过最没有争议的应该是Javascr ...
- 【Android进阶】Android程序与JavaScript之间的简单调用
本篇将讲解一个简单的Android与JavaScript之间的简单调用的小程序 效果图 工程结构 HTMLActivity.java代码 package com.example.javatojs; i ...
- TypeScript和JavaScript哪种语言更先进
TypeScript和JavaScript哪种语言更先进 近两年来最火爆的技术栈毫无争议的是JavaScript,随着ES6的普及,不管是从前端的浏览器来看,还是后端的NodeJS场景,JavaScr ...
随机推荐
- Sublime text追踪函数插件：ctags
转自:http://blog.csdn.net/xxhsu/article/details/30766675 一.下载: 1)http://ctags.sourceforge.net/ 2)http: ...
- bat
1.输出系统时间,利用系统时间做文件名 @echo offset filename=%date:~0,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%ti ...
- [DB那些事]数据库加密
说到数据库加密,目前最好且唯一的方案就是SqlCipher对sqlite3整体加密,微信也用的它.开源,且支持很多平台. 单就Android来说,集成不算太麻烦,1个jar包,3个so库,1个zip. ...
- DSP using MATLAB 随书示例Example2.8
x = [3, 11, 7, 0, -1, 4, 2]; nx = [-3:3]; h = [2, 3, 0, -5, 2, 1]; nh = [-1:4]; [y,ny] = conv_m(x,nx ...
- psql-01基本介绍
安装与启动 安装: apt-get install postgresql / yum install postgresql.XXX; 启动: mac下直接打开 linux service postgr ...
- Codeforces Round #337 (Div. 2)
水 A - Pasha and Stick #include <bits/stdc++.h> using namespace std; typedef long long ll; cons ...
- BZOJ1001 [BeiJing2006]狼抓兔子（平面图最小割转最短路）
..和HDU3870类似..注意n=1和m=1的情况. #include<cstdio> #include<cstring> #include<queue> #in ...
- 解决嵌入WinForm的WPF控件无法显示图片问题
解决办法是在控件初始化时,通过下面方法再次加载图片: ucCanvas.CreateCoordinateImage.Source = GetImageIcon(global::MainApplicat ...
- iOS学习26之UINavigationController
1. UINavigationController 1> 概述 UINavigationController : 导航控制器, 是 iOS 中最常用的多视图控制器之一, 用它来管理多个视图控制器 ...
- unity 常用函数
GameObject.FindGameObjectByTag(); anim.SetFloat("speed",Mathf.Abs(h)); Physics2D.lineCast2 ...