选项卡

快别卷了啊

于 2022-03-28 10:52:13 发布

阅读量93

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45605563/article/details/123789731

版权

选显卡的思路就是移入显示当前的内容，让其他的隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
 *{
     text-align: center;
 }
 nav li{
     display: inline;
     width: 24%;
     text-decoration: none;
     padding: 15px;
 }

 section{
     height: 300px;
     position: relative;
 }

  .ss{
      width: 50px;
      height: 50px;
      background: tomato;
      position: absolute;
      top: -20px;
  }
 </style>
</head>
<body>
    <nav id="nav">
     <ul>
         <li class="act" style="background-color: gold">选卡1</li>
         <li >选卡2</li>
         <li >选卡3</li>
         <li >选卡4</li>
     </ul>
    
    </nav>
    <div id="container">
         <section class="tab" style="background-color: tomato">内容1</section>
         <section class="tab" style="background-color: cyan">内容2</section>
         <section class="tab" style="background-color: blueviolet">内容3</section>
         <section class="tab" style="background-color: gold">内容4</section>
     </div>
</body>
<script>
    var list = document.getElementsByTagName("li"); //绑定节点
    var tab = document.getElementsByClassName("tab");
    for (var k=1;k<list.length;k++){            //循环初始化样式
        tab[k].style.display="none";            //让里面的内容除了第一个其他的全部隐藏掉
        list[k].style.backgroundColor = "white" //让里面的li除了第一个其他的全部变白色
    }
    for(var i=0;i<list.length;i++){                
        list[i].index = i;                                //让i的每次的值赋给list[i] 索引
        list[i].onmouseover = function () {               //移入显示
            for (var j=0;j<list.length;j++){              //循环
                tab[j].style.display = "none"             //让内容全部隐藏
                list[j].style.backgroundColor = "white"    
            }        
            tab[this.index].style.display = "block"       //让移入的那块对应的内容显示
            this.style.backgroundColor = "gold"
        }
    }
</script>
</html>