イベントアプリケーションコードバックアップとTabコンポーネント

4541 ワード

  • 
    
    
      
      JS Bin
    
    
      
    tab1
    tab2
    tab3
    1
    *{margin:0;padding:0}
    div{border: 1px solid #aaaaaa }
    #bigger{padding:5px;width:500px}
    .tabs{
      display:inline-block;
      width:165.3px;
      text-align:center ;
      padding : 5px 0 ;
      border-width:1px 0 0 1px;
    }
    #tab3{border-width:1px 1px 0 1px}
    #content{padding:30px;height:100px;}
    .tabs:hover{
      background-color: #eee;
      cursor:pointer
    }
    
    var tabList = document.getElementsByClassName('tabs')
    var content = document.querySelector('#content')
    for(var i=0 ;i
  • 
    
    
      
      JS Bin
    
    
      

    タイトル1です

    ×

    1

    1

    *{padding:0;margin:0}
    #content{
      position : absolute;
      border : 1px solid #fff;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin : auto;
      width : 400px;
      height: 200px;
      border-radius:5px;
      z-index:2;
      background-color: white;
    }
    #content-header{
      padding :10px; 
      border-bottom :1px solid #aaa
    }
    #x-box{
      position:absolute;
      right:10px;
      top:10px;
      font-size : 20px;
      cursor:pointer;
    }
    #content-body{
      padding :12px 10px;
    }
    #content-body>p{
      margin : 20px 0 ;
    }
    #content-footer{
      border-top:1px solid #ccc;
      text-align : right;
      padding :10px;
    }
    #cover{
      background-color: #aaa;
      position : absolute;
      height:100%;
      width:100%
      top:0;
      left:0;
      right:0;
      z-index:1;
      opacity:0.7;
    }
    #btn{
      position:absolute;
      margin : 10px;
    }
    #cover,#content{display:none;}
    span{ cursor:pointer}
    
    var btnStart = document.querySelector('#btn')
    var contentBox = document.getElementById('content')
    var cover = document.getElementById('cover')
    btnStart.addEventListener('click',function(){
      contentBox.style.display = 'block';
      cover.style.display = 'block'  
    },false)
    
    function goBack(){
       contentBox.style.display = 'none';
      cover.style.display = 'none'  
    }
    
    document.querySelector('#btn-cancel').addEventListener('click',goBack,false)
    document.querySelector('#x-box').addEventListener('click',goBack,false)
    cover.addEventListener('click',goBack,false)
    

    方のTab组み合わせJQ原生JSとJQは同じ意味だけど面倒くさいhttp://js.jirengu.com/sixil/1/edit?html,css,js,output
    
    
    
    
      
      JS Bin
    
    
    
    1. a
    2. b
    3. c

    1. a
    2. b
    3. c
    *{margin:0;padding:0;}
    ul,ol{list-style:none;}
    
    
    .tabs .nav > ol{
      display: flex;
    }
    .tabs .nav > ol > li{
      border: 1px solid red;
      padding: 0 2em;
    }
    .tabs .nav > ol > li.active{
      background: red;
    }
    
    .tabs > .panes > ol >li{
      border: 1px solid blue;
      min-height: 5em;
      display: none;
    }
    
    .tabs > .panes > ol >li.active{
      display: block;
    }
    
    $('.tabs').on('click', '.nav ol>li', function(e){
      var $li = $(e.currentTarget)
      var n = $li.index()
      $li.addClass('active').siblings('.active').removeClass('active')
      $li.closest('.tabs').find('.panes>ol>li').eq(n)// tabs, 。
        .addClass('active').siblings('.active')
        .removeClass('active')
    })