HTML CSS JS布局与交互-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45102155/article/details/106074863

html布局
<body>
    <div class="wrap">
       <div class="box">
          <div class="one action">按钮1</div>
          <div class="one">按钮2</div>
          <div class="one">按钮3</div>
       </div>
       <div class="center">内容1</div>
       <div class="center" style="display: none;">内容2</div>
       <div class="center" style="display: none;">内容3</div>
    </div>
</body>

css样式

 <style>
        *{
            padding: 0;margin: 0;list-style: none;
        }
        .wrap{
            width: 600px;
            height: 500px;
        }
        .box{
            width: 100%;
            height: 80px;
            display: flex;
        }
        .box .one{
            flex: 1;
            text-align: center;
            line-height: 80px;
            border: 1px solid red;
        }
        .action{
            background-color: red;
        }
        .center{
            width: 100%;
            height: 420px;
            border: 1px solid blue;
            border-top: 0px;
            text-align: center;
            line-height: 620px;
            font-size: 30px;
        }
    </style>

javascript逻辑

<script>
    let one  = document.getElementsByClassName('one');
    let center = document.getElementsByClassName('center');
    for(var i=0;i<=one.length;i++){
        one[i].a = i;
        one[i].onclick = function(){
            for(var j = 0;j<one.length;j++){
                one[j].className = 'one';
                center[j].style.display = 'none'
            }
        this.className = 'one action';
          center[this.a].style.display = 'block'
        }
    }
  </script>

原生js实现选项卡