Looking to create a function that toggles classes on elements when specific links are clicked. For example, clicking on link 1 should add the "active" class to the red element, while clicking on link 2 should do the same for the pink element, and so forth. My javascript skills are limited, and I've only been able to apply the active class to the links themselves, not the corresponding elements.
$(".trigger").click(function(){
$('.trigger').removeClass('checked')
$(this).addClass('checked')
}).main{
position: relative;
width: 500px;
height: 500px;
}
.basic{
width: 300px;
height: 300px;
position: absolute;
right: 0;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
.blue{
background-color: blue;
}
.green {
background-color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="trigger">Link 1</a>
<a href="#" class="trigger">Link 2</a>
<a href="#" class="trigger">Link 3</a>
<a href="#" class="trigger">Link 4</a>
<div class="main">
<div class="red basic"></div>
<div class="pink basic"></div>
<div class="blue basic"></div>
<div class="green basic"></div>
</div>