原生tab

  
  




    

        

            
tab1
            
tab2
            
tab3
        
        

            
 1
            
 2
            
 3
        
    


let oTabNav = document.getElementsByClassName('tab-nav')[0],
    oTabBtn = document.querySelectorAll('.tab-nav>li');
    oTabCont = document.querySelectorAll('.tab-content>li');
oTabNav.addEventListener('click',function(e){

    if(e.target.tagName.toLowerCase() === 'li'){
        for(let i=0; i<oTabBtn.length; i++){
            oTabBtn[i].classList.remove("active");
        }
        e.target.classList.add("active");
    }
    let index = Array.prototype.indexOf.call(oTabBtn, e.target);
    for(let i=0; i<oTabCont.length; i++){
        oTabCont[i].classList.remove("active");
    }
    oTabCont[index].classList.add("active");
});

  
  





  

    
タイトルです
    

      
 
      
 
    
     
     
  



let btn = document.getElementById('btn'),
            overlay = document.getElementsByClassName('overlay')[0],
            modal = document.getElementsByClassName('modal')[0];
        btn.addEventListener('click',function(e){
            e.stopPropagation();
            overlay.setAttribute('style','display:block');
        });
        document.addEventListener('click',function(e){
            overlay.setAttribute('style','display:none');
        });
        modal.addEventListener('click',function(e){
            e.stopPropagation();
            if(e.target.classList.contains('close') || e.target.classList.contains('cancel')){
                overlay.setAttribute('style','display:none');
            }
        });