JSFiddle - React, Tailwind, and code Playground
HTML
<form id="tabs">
<label title="tab1"><input name="tabRadio" type="radio">Один</label><br>
<label title="tab2"><input name="tabRadio" type="radio">Два</label><br>
<label title="tab3"><input name="tabRadio" type="radio">Три</label><br>
<label title="tab4"><input name="tabRadio" type="radio">Четыре</label><br>
</form>
<div id="content">
<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>
<div id="tab4">4</div>
</div>
CSS
label {
cursor: pointer;
text-decoration: none;
}
JavaScript
$(document).ready(function() {
$("#content div").hide(); // Скрываем содержание
$("#tabs li:first").attr("id","current"); // Активируем первую закладку
$("#content div:first").fadeIn(); // Выводим содержание
$('#tabs label').click(function() {
$("#content div").hide(); //Скрыть все сожержание
$("#tabs li").attr("id",""); //Сброс ID
$(this).parent().attr("id","current"); // Активируем закладку
$('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки
});
})();