tab切换

最新推荐文章于 2024-06-05 16:14:30 发布

Asmruan

最新推荐文章于 2024-06-05 16:14:30 发布

阅读量615

点赞数

文章标签： javascript elementui vue.js

本文链接：https://blog.csdn.net/Asmruan/article/details/121940270

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title dt {
        float: left;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 22px;
      }
      .title::after {
        content: "";
        display: block;
        clear: both;
      }
      /* .content dt:nth-of-type(n){
            display: none;
        }
        .content dt:nth-of-type(1){
            display: block;
        } */
      /* n  0-3 2-5  */
      .content dt:nth-of-type(n + 2) {
        display: none;
      }
    </style>
  </head>
  <body>
    <dl class="title">
      <dt>标题1</dt>
      <dt>标题2</dt>
      <dt>标题3</dt>
    </dl>

    <dl class="content">
      <dt>内容1</dt>
      <dt>内容2</dt>
      <dt>内容3</dt>
    </dl>
  </body>
</html>
<script>
  console.log(document.getElementsByTagName("dt"));

  var titleList = document.querySelector(".title").children;
  var contentList = document.querySelector(".content").children;
  console.log(titleList);

  //   for(var i=0;i<titleList.length;i++){
  //       titleList[i].onclick = function(){
  //           // 获取点击标题的下标，显示对应content下dt的内容
  //           // console.log(i);
  //           // console.log(this);
  //           for(var j =0;j<titleList.length;j++){
  //               contentList[j].style.display = "none"
  //               if(titleList[j]  == this){
  //                   console.log(j);
  //                   contentList[j].style.display = "block"
  //               }
  //               // else{
  //               //     contentList[j].style.display = "none"
  //               // }
  //           }

  //         // contentList[i].style.display = "block"

  //         // contentList[2].style.display = "block"
  //     }
  // }

  //   let 声明一个 1，块级作用域（就是只在大括号内生效）  2，没有变量提升
  // for (let i = 0; i < titleList.length; i++) {
  //   titleList[i].onclick = function () {
  //     // 获取点击标题的下标，显示对应content下dt的内容
  //     for (var j = 0; j < titleList.length; j++) {
  //       contentList[j].style.display = "none";
  //     }
  //     contentList[i].style.display = "block";
  //   };
  // }

  //   console.log(a);
  //   let a = 1

  //   function demo(){
  //       console.log(a);
  //   }
  //   demo()
</script>

Asmruan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab切换

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
复制链接

扫一扫