1
JQueryでこれを行うには、同じクラス名と同じ内容のDIVがいくつかあります。つまり、ボックスをクリックすると、コンテンツはこのボックスだけに表示され、他のボックスには表示されません。jQuery - 'クリックされた'アイテムと同じクラスの要素を選択
ここまでは私のコードです。
$(document).ready(function() {
// Catch all clicks on a link with the class 'link'
$('.category-item-image').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var confirmdelete = $('.overaly').attr('class');
// Remove any active classes:
// Add the 'active' class to this link:
// replace this line //$(this).addClass('active');
$('div.' + confirmdelete).addClass("checked");
});
});
そして、私のCSS：
あなたが ID Sを使用していないのはなぜ.caterory{
position: relative;
width: 100%;
}
.category-content{
position: relative;
width: 55%;
margin: 0 auto;
}
.category-about{
text-align: center;
}
.category-about h1{
font-family: 'gothamrnd-light';
font-size: 2.5rem;
font-weight: 100;
}
.category-about p{
font-family: 'open sans';
font-size: 1.5rem;
font-weight: 100;
}
.category-content-image{
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-between;
}
.category-item{
width: 250px;
height:150px;
margin: 11px 0;
}
.category-item-image{
position: relative;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.category-item-image a{
position: absolute;
text-decoration: none;
color: #000;
width: 148px;
height: 38px;
line-height: 36px;
left: 50%;
margin-left: -74px;
top: 50%;
margin-top: -15px;
padding: 0 20px;
background-color: #fff;
}
.checked-box{
position: absolute;
width: 40px;
height: 100%;
background-color: #14C573;
right: 0;
top: 0;
opacity: 0;
}
.checked-box span{
position: absolute;
text-align: left;
top: 50%;
margin-top: -15px;
left: 50%;
margin-left: -15px;
}
.overaly{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:rgba(8, 45, 47, 0.61);
border-radius: 5px;
opacity: 0;
}
.overaly.checked,.checked-box.checked{
opacity: 1;
}
<div class="category-content-image">
<div class="category-item">
<div class="category-item-image" style="background-image:url('img/eksploro-1.jpg');">
<div class="overaly"></div>
<a href="#">politike <div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#FFF" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#FFF" fill="transparent" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
</div>
</div>
<div class="category-item">
<div class="category-item-image" style="background-image:url('img/eksploro-1.jpg');">
<div class="overaly"></div>
<a href="#">politike <div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#FFF" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#FFF" fill="transparent" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
</div>
</div>
</div>
は、あなたは、私たちはより良いあなたのコードを理解できるようにjsfiddleを投稿することができます – geeksal
https://jsfiddle.net/26L6oxss/ –
私がチェックしたクラスのみを明確化イムのための最初の1つの –