tab切替とモードボックス

    
    
    



    

        tab1
        tab2
        tab3
        tab4
    
    

        

            
tab1
            
tab2
            
tab3
            
tab4
        
    



    var spans=document.getElementsByTagName("span");
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<spans.length;i++){
        spans[i].index=i;
        spans[i].onmouseover=function(){
            // span 
            for(var j=0;j<spans.length;j++){
                spans[j].className="";
                lis[j].className="";
            }
            this.className="current";
            lis[this.index].className="show"
        }
    }

   var spans=document.querySelectorAll(".mt>span");
    var lis=document.querySelectorAll(".mb>li");
    for(var i=0;i

    
    
    


    
   

       

           

               
タイトルタイトル
               X
           
           

               
 
               
 2
           
       
   
   
       var btn=document.querySelector(".btn");
       var dialog=document.querySelector(".dialog-bg");
       var close=document.querySelector("#close");
       var dialogCt=document.querySelector(".dialog-ct");
        btn.addEventListener('click',function(){
            dialog.classList.add("show");
        });
       close.addEventListener('click',function(){
           dialog.classList.remove("show");
       });
       dialog.addEventListener('click',function(){
           dialog.classList.remove("show");
       });
       dialogCt.addEventListener('click',function(e){
           e.stopPropagation();
       })