JS+CSS实现选项卡切换

JS+CSS实现选项卡切换

先看下实现效果，公众号看到大佬写的，感叹CSS的神奇，模仿一下

CSS代码：

 ul{
    
    
            list-style:none;
        }
        ul::before,
        ul::after{
    
    
            content:"";
            display:table;
            clear:both;
        }
        ul > li{
    
    
            float:left;
            padding: 0 15px;
            font: 500 16px/30px "微软雅黑";
            color:#000;
            position:relative;
            cursor:pointer;
            transition: all .5s ease-in;
        }
        li::after{
    
    
            content:"";
            display:block;
            position:absolute;
            top:-2px;
            left:100%;
            width:0;
            height:100%;
            border-bottom:2px solid #000;
            transition: all .3s ease-in;
        }
        li:hover::after{
    
    
            left:0;
            width:100%;
        }
        li:hover ~ li::after{
    
    
            left:0;
        }
        .active{
    
    
            color:#fff;
            background:#000;
        }

HTML + JS代码

<ul>
        <li>Luffy</li>
        <li>Zoro</li>
        <li>Tony</li>
        <li>Sanji</li>
        <li>Usopp</li>
        <li>Franky</li>
    </ul>

    <script>
        const lis = document.querySelectorAll("li");
        for(let i=0 ; i< lis.length ; i++) {
    
    
            lis[i].addEventListener("click",function() {
    
    
               for( var j = 0; j< lis.length; j++){
    
    
                   lis[j].className = ""
               }
               lis[i].className = "active"
            })
        }
    </script>