イベントアプリケーションコードバックアップとTabコンポーネント
4541 ワード
JS Bin
tab1tab2tab3
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
- a
- b
- c
- 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')
})