オリジナルJSでtab切替効果を実現

    
    
    
    
    



    

        

            

                
 
                
 
                
 
            
        
        

            

                
![](http://upload-images.jianshu.io/upload_images/5051517-d468f24614a5a192.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                
![](http://upload-images.jianshu.io/upload_images/5051517-ad59e7b6626d25e2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                
![](http://upload-images.jianshu.io/upload_images/5051517-f51f663ae90c0d77.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            
        
    

    
        function $(str) {
            return document.querySelector(str);
        }
        var tabHeader = $(".tab-header>ul");
        var tabCt = $(".tab-content>ul")
        tabHeader.addEventListener("click", function(e) {
            if (e.target.tagName.toLowerCase() === "li") {
                for (var i = 0; i < tabHeader.children.length; i++) {
                    tabHeader.children[i].classList.remove("oncls");
                }
                e.target.classList.add("oncls");
                for (var i = 0; i < tabCt.children.length; i++) {
                    tabCt.children[i].classList.remove("see");
                }
                var index = [].indexOf.call(tabHeader.children, e.target);
                tabCt.children[index].classList.add("see");
            }
        })