多个tab

HTML

    
    
    
    
    



    

        

            
title1
            
title2
            
title3
            
title4
        
        

            
content1
            
content2
            
content3
            
content4
        
        

            

                
title1
                
title2
                
title3
                
title4
            
            

                
content1
                
content2
                
content3
                
content4
            

        
        

            

                
title1
                
title2
                
title3
                
title4
            
            

                
content1
                
content2
                
content3
                
content4
            

        
    

JS

var container = document.querySelectorAll(".container")
for (var i = 0; i < container.length; i++) {
    var tab_title = container[i].querySelectorAll(".tab_title li")
    for (var j = 0; j < tab_title.length; j++) {
        tab_title[j].setAttribute("index", j)
        tab_title[j].onclick = function() {
            var current_tab_title = this.parentElement.querySelectorAll("li")
            for (var h = 0; h < current_tab_title.length; h++) {
                current_tab_title[h].className = ''
            }
            this.className = 'current'
            var index = this.getAttribute("index")
            var tab_content = this.parentElement.nextElementSibling.querySelectorAll("div")
            for (var k = 0; k < tab_content.length; k++) {
                if (k == index) {
                    tab_content[k].style.display = "block"
                } else {
                    tab_content[k].style.display = "none"
                }
            }
        }
    }
}

多个tab