html, body {
background: white;
padding: 0;
margin: 0;
}
body.lock{
overflow: hidden;
}
.box{
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
}
.btn{
background: black;
cursor: pointer;
color: white;
padding: 15px;
text-align: center;
width: 50%;
}
.btn.active{
background: #ff5722;
}
.btn:hover{
background: #ff5722;
}
.hideContent{
background: #eee;
color: white;
display: none;
position:fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 98;
}
.hideContent.active{
display: block;
}
.center{
color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
- メニューが入ります
- メニューが入ります
- メニューが入ります
jQuery(function($){
$(function(){
var btn = $('.btn');
var hideContent = $('.hideContent');
$('.btn').on('click', function(){
var index = $(this).index();
if($(this).hasClass('active')){
// クリックした要素が既にactiveだった時
$(this).removeClass('active');
hideContent.eq(index).removeClass('active');
}else{
// クリックした要素がactiveじゃない時
btn.removeClass('active');
hideContent.removeClass('active');
$(this).addClass('active');
hideContent.eq(index).addClass('active');
}
});
});
});
【jQuery】ボタンを押したら全画面でコンテンツを表示するボタンが二つ以上あったときの処理
2020/06/17