イベントの適用

4721 ワード

テーマ1:実現tabhttp://js.jirengu.com/sinawaxule/1/edit


  
    var tabs = document.querySelectorAll('.tab .tab-header>li')
    var panels = document.querySelectorAll('.tab .tab-container>li')

    tabs.forEach(function (tab) {
      tab.addEventListener('click', function () {

        tabs.forEach(function (node) {
          node.classList.remove('active')
        })

        this.classList.add('active')
        var index = [].indexOf.call(tabs, this)

        panels.forEach(function (node) {
          node.classList.remove('active')
        })
        panels[index].classList.add('active')
      })
    })

タイトル2:モダリティボックスの実装http://js.jirengu.com/mayujilipa/1/edit





  
  
  
  modal


    
    
      
         し
        x
      
      
         
         
      
    

  
  
    var btn = document.querySelector('#btn-modal')
    modal = document.querySelector('#modal-1')
    modalCt = document.querySelector('#modal-1 .modal-ct')
    close = document.querySelector('#modal-1 .close')

    btn.addEventListener('click', function () {
      modal.classList.add('open')
    })

    close.addEventListener('click', function () {
      modal.classList.remove('open')
    })

    modal.addEventListener('click', function () {
      modal.classList.remove('open')
    })

    modalCt.addEventListener('click', function () {
      e.stopPropagation()
    })

リファレンス

position, display, float