事件应用代码备份 和Tab组件

  
  


  

    
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

  
  


  

  点我1
    

      

        
我是标题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

  
  



  

    

      
1
      
2
      
3
    
  
  

    

      
a
      
b
      
c
    
  

  
  

  
  

  

    

      
1
      
2
      
3
    
  
  

    

      
a
      
b
      
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')
})