原生js実装tabタブ

    
    
    



    

        
 
        
 
        
 
        
 
    
    

        
 
        
 
        
 
        
 
    


    var tab = document.getElementsByClassName('tab')[0]
    var tabCart = tab.getElementsByTagName('li')
    var content = document.getElementsByClassName('content')[0]
    var contentCart = content.getElementsByTagName('li')
    tab.addEventListener('click',function(e){
        console.log(tabCart.length)
        var index = '1'
        //  
        for(var i=0;i<tabCart.length;i++){
            if(e.target==tabCart[i]){
                index = i
            }
        }
        //  active 
        tabCart[index].classList.add("active")
        //  active 
        for(var i=0;i<tabCart.length;i++){
            if(tabCart[i] != tabCart[index]){
                tabCart[i].classList.remove("active")
                console.log(1)
            }
        }
            //  current 
        contentCart[index].classList.add("current")
        //  current 
        for(var i=0;i<contentCart.length;i++){
            if(contentCart[i] != contentCart[index]){
                contentCart[i].classList.remove("current")
                
            }
        }
    })