ステップアップタスク10

4957 ワード
1.下図のようなタブ切替機能を実現



    
    Title
    




    
    
        
  • tab1
    • 
        
  • tab2
    • 
        
  • tab3
    • 
    

    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
    




    var ct=document.querySelector('.tab-ct')
    var header=document.querySelector('.header')
    var headerLis=document.querySelectorAll('.header>li')
    var contentLis=document.querySelectorAll('.content>li')
    header.addEventListener('click',function () {

    })
    headerLis.forEach(function (t) {
        t.addEventListener('click',function () {
           headerLis.forEach(function (t2) {
               t2.classList.remove('active')
           })
            this.classList.add('active')
            var index=[].indexOf.call(headerLis,this)
           contentLis.forEach(function (t2) {
               t2.classList.remove('active')
           })
           contentLis[index].classList.add('active')
        })
    })

2.下図のモダリティボックス機能を実現し、モダリティボックスをクリックして隠さない、クリックして閉じる、モダリティボックス以外の領域のモダリティボックスを隠す



    
    Title
    


 

     
 

 



    

        
タイトルです

        x
    

    

        
 

        
 

    

    

        キャンセル
        を します。
    



 

 
     var btn=document.querySelector('.btn-ct')
     var modal=document.querySelector('.modal')
     var modalCt=document.querySelector('.modal-ct')
     var close=document.querySelector('.close')
     var cancel=document.querySelector('.cancel')
     btn.addEventListener('click',function () {
        modal.classList.add('open')
     })
     close.addEventListener('click',function () {
         modal.classList.remove('open')
     })
     cancel.addEventListener('click',function () {
         modal.classList.remove('open')
     })
     modal.addEventListener('click',function () {
         modal.classList.remove('open')
     })
     modalCt.addEventListener('click',function (e) {
         e.stopPropagation()
     })
擬似要素セレクタ関連コンビネーションセレクタ
Java ORM標準JPAプログラミング(1)