JS几种table切换
1.使用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>
2.使用className+匿名函数的自执行（html，css样式与1相同）
<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>
3.自定义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>
4.使用for循环+if判断当前点击与自定义数组是否匹配（html，css样式与3相同）
<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>
这是初学JS时所使用的方法，现在整理出来，最主要的还是要有自己的想法才是最好的。
JS几种table切换的更多相关文章
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- swiper （Table切换和动态加载时候出现的问题）
本文为让心灵-去旅行原创,转载请说明.. 我们在写一个简单的swiper图片轮播的时候很简单,是写死的也就那么几张图片轮播.如果这时候图片和一些东西是后台的,你从js里动态添加到DOM时,这时候你就会 ...
- vue的table切换
HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- [转] js实现html table 行，列锁定
js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- JS几种数组遍历方式以及性能分析对比
前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...
- js两种定义函数、继承方式及区别
一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function ...
随机推荐
- Linux信号基础
Linux信号基础 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Linux进程基础一文中已经提到,Linux以进程为单位来 ...
- Quality assessment and quality control of NGS data
http://www.molecularevolution.org/resources/activities/QC_of_NGS_data_activity_new table of contents ...
- C/C++与Matlab混合编程
Matlab 拥有丰富的功能,编程简单.不过,有些情况下,Matlab程序的执行速度比较慢.C/C++编译执行的程序速度比较快,编程难度上比Matlab要高一些.因此存在一种方案,就是使用Matlab ...
- Beginning Windows Azure Development Guide
目 录 一 初始化Windows Azure 二 云应用程序的编写. 2.1云应用程序的创建. 2.2一个简单的云应用程序. 2.3 托管云程序. 三 云程序的数据库操作. 3.1通过Cloud平台 ...
- 关于NOR-FLASH和NAND-fLASH的区别。——Arvin
NANDFLASH: Nand-flash内存是flash内存的一种,1989年,东芝公司发表了NAND flash结构.其内部采用非线性宏单元模式,为固态大容量内存的实现提供了廉价有效的解决方案.N ...
- Shell 教程
Shell 是一个用C语言编写的程序,它是用户使用Linux的桥梁.Shell既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操 ...
- 第5章 Web自动化测试
5.1 Selenium简介 5.1.1 自动化测试简介 5.1.2 Selenium简介 5.2 Selenium2环境搭建 5.3 Java基础 5.3.1 新建Java工程和类 5.3.2 Ec ...
- informix dbaccess 常用执行方式及常见技巧
假设: A.数据库servername: testserver B.数据库名:testdb C.SQL脚本文件: sqlfile.sql create table test_table(c1 inte ...
- 笨办法学 Python （Learn Python The Hard Way）
最近在看:笨办法学 Python (Learn Python The Hard Way) Contents: 译者前言 前言:笨办法更简单 习题 0: 准备工作 习题 1: 第一个程序 习题 2: 注 ...
- JAVA学习之路（环境配置,）
最近过去的寒假我就开始看一些JAVA的学习视频了,视频是毕向东老师的,讲得还不错,东北口音,欧了没? 首先是一些基础概念. 1.JAVA的三种技术架构 企业版 J2EE 标准版 J2SE 小型版 J2 ...