脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript实现简单tab选项卡切换

4种JavaScript实现简单tab选项卡切换的方法

 更新时间：2016年01月06日 09:15:17   作者：Cakty、Riven  
这篇文章主要介绍了4种JavaScript实现简单tab选项卡切换的方法，感兴趣的小伙伴们可以参考一下

本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法，分享给大家供大家参考，具体内容如下
效果图：

 

方法一：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选项卡操作方法汇总 jquery选项卡操作方法汇总

希望本文所述对大家学习javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 基于javascript实现的快速排序

    基于javascript实现的快速排序

    本篇文章主要介绍了javascript实现的快速排序的方法与原理说明：找基准点、建立二个数组分别存储、递归。需要的朋友来看下吧
    2016-12-12
  • JS判断是否长按某一键的方法

    JS判断是否长按某一键的方法

    这篇文章主要介绍了JS判断是否长按某一键的方法,涉及JavaScript针对键盘按键的判断及响应操作技巧,需要的朋友可以参考下
    2016-03-03
  • javascript 弹出层居中效果的制作

    javascript 弹出层居中效果的制作

    做一个带拖动的弹出层效果(像提示框那种) ,看了下代码与实现效果，值得学习应用。
    2009-09-09
  • JS实现一个秒表计时器

    JS实现一个秒表计时器

    这篇文章主要为大家详细介绍了JS实现一个秒表计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 微信jssdk用法汇总

    微信jssdk用法汇总

    这篇文章主要针对微信jssdk用法进行汇总，通过ready接口处理成功验证、通过error接口处理失败验证等内容介绍，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 你不知道的5个JavaScript中JSON的秘密功能分享

    你不知道的5个JavaScript中JSON的秘密功能分享

    在开发中，我们会经常使用 JSON.stringify(object) 来序列化对象，但JSON.stringify方法除了了第一个参数外，还有其它参数可用，今天我们一起来看看这些参数是做啥的
    2023-05-05
  • js如何读取csv内容拼接成json

    js如何读取csv内容拼接成json

    这篇文章主要介绍了js如何读取csv内容拼接成json，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • JavaScript中this函数使用实例解析

    JavaScript中this函数使用实例解析

    这篇文章主要介绍了JavaScript中this函数使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • use jscript with List Proxy Server Information

    use jscript with List Proxy Server Information

    use jscript with List Proxy Server Information...
    2007-06-06
  • 微信小程序scroll-view实现滚动穿透和阻止滚动的方法

    微信小程序scroll-view实现滚动穿透和阻止滚动的方法

    这篇文章主要介绍了微信小程序scroll-view实现滚动穿透和阻止滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论