这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要分享几种比较简单实用的 JavaScript tabel 切换 的相关资料, 需要的朋友可以参考下
闲着没事, 随便写了个简单的 JavaScript tabel 切换, 大家有兴趣的看看, 有需要的就拿去吧. 废话不说了, 大家看代码吧
方法一: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 tabel 切换,希望大家喜欢。
来源: http://www.phperz.com/article/17/0408/267806.html