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

前端技术 2023/09/04 JavaScript

本文实例讲解了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/11650

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案