当前位置：网站首页>Simple native JS tab bar switching

Simple native JS tab bar switching

2022-06-25 19:16:00 【Good first】 

<!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>
        *{
    
            margin: 0 ;
            padding: 0;
        }
      .syr{
    
          width: 600px;
          height: 400px;
          border: 1px solid red;
          margin: 100px auto;
      }
    .item{
    
        width: 100%;
        height: 40px;
        border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .item span{
    
        border: 1px solid red;
        padding: 10px 70px;
    }
    .itemlist{
    
        width: 100%;
        height: 356px;
        border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .itemLists{
    
        display: none;
    }
 

    .nones{
    
        display: block;
    }
    </style>
</head>
<body>
    <div class="syr">
    <div class="item">
        <span class="itemss nones"> Content of a </span>
        <span class="itemss"> Content of the two </span>
        <span class="itemss"> Content of the three </span>
    </div>
    <div class="itemlist">
        <span class="itemLists nones"> Content of a </span>
        <span class="itemLists"> Content of the two </span>
        <span class="itemLists"> Content of the three </span>
    </div>
    </div>
    <script>
       var item = document.getElementsByClassName('itemss');
       var itemLists = document.getElementsByClassName('itemLists');

   //  Add class nomenclature  
        for (let i = 0; i < item.length; i++) {
    
            const element = item[i];
            element.onclick = function () {
    
                for (let k = 0; k < itemLists.length; k++) {
    
                    if (i == k) {
    
                        itemLists[k].classList.add('nones'); // Add with display block The name of the class  
                    }else{
    
                        itemLists[k].classList.remove('nones');// Delete with display block The name of the class  
                    }
                }
            }
        }
     // display  Law 
        // for (let i = 0; i < item.length; i++) {
    
        // const element = item[i];
        // element.onclick = function () {
    
        // console.log(i);
        // for (let k = 0; k < itemLists.length; k++) {
    
        // if (i == k) {
    
        // itemLists[k].style.display = 'block'
        // }else{
    
        // itemLists[k].style.display = 'none'
        // } 
        // }
        // }
        // }
       
    </script>
</body>
</html>
原网站

版权声明
本文为[Good first]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202190519033916.html

边栏推荐

猜你喜欢

随机推荐