I have a project that when I click titleA, all blocks of titleA must be added with a yellow style, and when titleB is clicked, a yellow style must be added to the titleB page, and the yellow style of titleA will be removed!
But I don’t know this. How to achieve the effect, I need some help from everyone, thank you.
$('#js-title1').on('click',function(){
$('#js-title1').addClass('active'); //點擊到的增加樣式
$('#js-title2').removeClass('active') //同層其他元素移除樣式
})body {
padding: 30px;
}
.wrap {
display: flex;
margin-bottom: 100px;
}
.wrap .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.wrap-2 {
display: flex;
}
.wrap-2 .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.active {
position: relative;
}
.active::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
right: 0;
display: block;
width: 50px;
height: 8px;
background: #FFEB50;
z-index: -1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
<a href="javascript:;" class="demo" id="js-title1">titleA</a>
</li>
<li>
<a href="javascript:;" class="demo" id="js-title2">titleB</a>
</li>
</ul>
<ul class="wrap-2">
<li>
<a href="javascript:;" class="demo" id="js-title1">titleA</a>
</li>
<li>
<a href="javascript:;" class="demo" id="js-title2">titleB</a>
</li>
</ul>There are multiple js-title1 & js-title2, do not use ID, consider to use css class name.
$('.js-title1').on('click',function(){
$('.js-title1').addClass('active'); //點擊到的增加樣式
$('.js-title2').removeClass('active') //同層其他元素移除樣式
})
$('.js-title2').on('click',function(){
$('.js-title2').addClass('active'); //點擊到的增加樣式
$('.js-title1').removeClass('active') //同層其他元素移除樣式
})body {
padding: 30px;
}
.wrap {
display: flex;
margin-bottom: 100px;
}
.wrap .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.wrap-2 {
display: flex;
}
.wrap-2 .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.active {
position: relative;
}
.active::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
right: 0;
display: block;
width: 50px;
height: 8px;
background: #FFEB50;
z-index: -1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
<a href="javascript:;" class="demo js-title1">titleA</a>
</li>
<li>
<a href="javascript:;" class="demo js-title2">titleB</a>
</li>
</ul>
<ul class="wrap-2">
<li>
<a href="javascript:;" class="demo js-title1">titleA</a>
</li>
<li>
<a href="javascript:;" class="demo js-title2">titleB</a>
</li>
</ul>Instead of the id attribute use the class attribute
and in jQuery, get the elements with . instead of #
IDs must be unique. You can't have more than one on the same page. Perhaps use a data attribute instead. Here's a stripped down example.
// When any title is clicked on
$('.demo').on('click', function() {
// Get the id from the dataset
const id = $(this).data('id');
// Remove all the active classes
$('.demo').removeClass('active');
// Add a class to all those elements that
// have a data-id that matches the id
$(`[data-id="${id}"`).addClass('active');
});.active { background: #FFEB50; }
.demo:hover { cursor: pointer; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="demo" data-id="js-title1">titleA</a>
<a class="demo" data-id="js-title2">titleB</a>
<a class="demo" data-id="js-title1">titleA</a>
<a class="demo" data-id="js-title2">titleB</a>Additional documentation