Tabs with jquery and blurb module does not work properly

We created our own "tab module" from a Blurb module. Each tab has its own image and the color changes when you hover it. If the „tab" is active, the color of the „tab" changes into the same like the content area. The contents are integrated separately in sections that are superimposed. There is also a jquery code that displays the content that fits to the image. When the page is loaded for the first time, the first "tab" is open and the content is displayed. Unfortunately I don't know why the corresponding „blurb“-tab is not in the color for its active state.

Now my questions:
- How do I get the color of the first tab to also take on the color of the "active" state?
- How can I assign the same function to an anchor link? So when I click on a link it opens the corresponding tab with content.

I am a total beginner with jquery.

Here is my code:
<style>
#blurb-tabs .et_pb_column {
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}
#blurb-tabs .tab-title {
width:14.28vw;
transition: all .3s ease-in-out;
}

@media (max-width: 767px ) {
#blurb-tabs .tab-title {
width:50%;
}
#blurb-tabs .tab-title .et_pb_main_blurb_image {
margin-bottom:10px; /* Reduce icon bottom margin */
}
}

@media (max-width: 479px ) {
#blurb-tabs .tab-title {
width:100%;
}
#blurb-tabs .tab-title .et_pb_blurb_content { /* This moves icon to the right */
display:flex;
align-items:center;
justify-content:flex-start;
}
#blurb-tabs .tab-title .et_pb_main_blurb_image { /* Fix icon margins on mobile */
margin-bottom:0;
margin-right:30px;
}
}

#blurb-tabs .tab-title {
transition:all .3s ease-in-out;
}
#blurb-tabs .tab-title:hover {
cursorointer;
}
#blurb-tabs .tab-title.active-tab {
background:#f2f2f2; /* Active tab background color */
}
#blurb-tabs .tab-title.active-tab .et_pb_blurb_container h4 a {
color:#000; /* Active tab title color */
}
#blurb-tabs .tab-title.active-tab .et-pb-icon {
color:#666!important; /* Active tab icon color */
}

.tab-content {
display:none;
}
.tab-open {
display:block;
}
</style>


<script>
jQuery(document).ready(function($)
{
$('.tab-title').each(function () {
var section_id = $(this).find("a").attr("href");
$(this).find("a").removeAttr("href");
$(this).click(function() {
$(this).siblings().removeClass("active-tab");
$(this).addClass("active-tab");
$('.tab-content').hide();
$(section_id).show();
$('html, body').animate({scrollTop: $(section_id).offset().top}, 1000);
});
});
});
</script>

 

Thanks a lot for your support. The code works very well.

With my second question, I meant that we are using the same icons as in the tabs elsewhere on the page. If you click on this, the user should be jumping to the corresponding "tab", which then opens.
Any idea?

Many Thanks