脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js table切换

分享几种比较简单实用的JavaScript tabel切换

 更新时间：2015年12月31日 14:22:23   作者：Cakty、Riven  
这篇文章主要分享几种比较简单实用的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切换，希望大家喜欢。

您可能感兴趣的文章:

相关文章

  • 前端Token 组成及生成方法示例详解

    前端Token 组成及生成方法示例详解

    这篇文章主要为大家介绍了前端Token 组成及生成方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • 微信小程序绘制图片发送朋友圈

    微信小程序绘制图片发送朋友圈

    这篇文章主要为大家详细介绍了微信小程序绘制图片发送朋友圈，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • js判断屏幕分辨率的代码

    js判断屏幕分辨率的代码

    由于现在的很多用户的分辨率问题，导致很多广告会遮挡内容或者对于不同分辨率的用户不同的css样式，就可以参考下面的代码
    2013-07-07
  • js、jquery图片动画、动态切换示例代码

    js、jquery图片动画、动态切换示例代码

    这篇文章主要介绍了通过js、jquery实现的图片动画、图片动态切换 ,需要的朋友可以参考下
    2014-06-06
  • 在knockoutjs 上自己实现的flux(实例讲解)

    在knockoutjs 上自己实现的flux(实例讲解)

    下面小编就为大家分享一篇在knockoutjs 上自己实现的flux方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • JS 删除字符串最后一个字符的实现代码

    JS 删除字符串最后一个字符的实现代码

    本篇文章主要是对JS删除字符串最后一个字符的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • 微信小程序实战之自定义模态弹窗（8）

    微信小程序实战之自定义模态弹窗（8）

    这篇文章主要为大家详细介绍了微信小程序实战之自定义模态弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JS模拟的Map类实现方法

    JS模拟的Map类实现方法

    这篇文章主要介绍了JS模拟的Map类实现方法,可实现模拟java中map属性按照键值对保存的功能,提供了采用数组和json两种实现方式,需要的朋友可以参考下
    2016-06-06
  • JavaScript中日期函数的相关操作知识

    JavaScript中日期函数的相关操作知识

    日期函数是我们经常用到的知识点，下面通过本文给大家介绍JavaScript中日期函数的相关操作知识，非常不错，感兴趣的朋友一起学习吧
    2016-08-08
  • 纯js三维数组实现三级联动效果

    纯js三维数组实现三级联动效果

    这篇文章主要为大家详细介绍了纯js三维数组实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论