JSFiddle - React, Tailwind, and code Playground
HTML
<div class="inner">
<div class="buttons">
<div class="inl">Анонсы</div><div class="inl active">Реклама</div>
</div>
<div class="items">
<div class="announc" style="display: none;">анонсы</div>
<div class="article">реклама</div>
</div>
</div>
CSS
.buttons div {
display:inline;
cursor:pointer;
}
.buttons div.active {
color:red;
font-weight:bold;
}
JavaScript
$(document).ready(function(){
if ($('.announc').text()) {
$('.article').css('display','none');
$('.announc').css('display','block');
$('.buttons div:first').addClass('active');
$('.buttons div:last').removeClass('active');
}
$('.buttons div').click(function(){
if(!$(this).hasClass('active')){
$(this).parent().find('.active').removeClass('active');
$(this).addClass('active');
$(this).closest('.inner').find('.items>div').hide().eq($(this).index()).show();
}
})
})