zoukankan      html  css  js  c++  java
  • 原生js选项卡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <title>Title</title>
      <style>
        *{
          margin:0;
          padding:0;
        }
        ul li{
          list-style: none;
        }
        .ul1{
          display: flex;
        }
        .ul1 li{
           25%;
          height: 50px;
        }
        .ul1 li:nth-child(2n){
          background: orange;
        }
        .ul1 li:nth-child(2n+1){
          background: blue;
        }
        .ul2 li:not(:first-child){
          display: none;
        }
        .ul2 li:nth-child(2n){
          background: red;
           100%;
          height:500px;
        }
        .ul2 li:nth-child(2n+1){
          background: gray;
           100%;
          height:500px;
        }
      </style>
    </head>
    <body>
    <ul class="ul1" id="u1">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="ul2" id="u2">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    </body>
    </html>
    <script>
      window.onload = function(){
            var lis = document.getElementById("u1").children;
            var u2s = document.getElementById("u2").children;
            for(let i=0;i<lis.length;i++){
              lis[i].onclick = function(){
                this.index = i;
                for(let i=0;i<u2s.length;i++){
                  u2s[i].style.display = "none";
                }
                u2s[this.index].style.display = "block";
              }
            }
    
    
      }
    </script>
  • 相关阅读:
    url 编码与解码
    调硬件开门
    JsBridge 开灯关灯
    滚动条样式
    uni-app 组件传值及插槽
    Eapp 调接口及跳转
    uni-app 的基础格式
    Eapp 几个弹框
    flexible 移动端适配
    mongodb恢复备份
  • 原文地址:https://www.cnblogs.com/dujunfeng/p/7901181.html
Copyright © 2011-2022 走看看