JSFiddle - React, Tailwind, and code Playground

by Sergey Aleshin

HTML

<ul class="nav">
    <li onClick="view_tab('first_tab')">Первая вкладка</li>
    <li onClick="view_tab('second_tab')">Вторая вкладка</li>
    <li onClick="view_tab('third_tab')">Третья вкладка</li>
</ul>

<div id="box">
    <span id="tab" tab="first_tab">Первая вкладка...<br>1...</span>
    <span id="tab" tab="second_tab">Вторая вкладка...<br>2...</span>
    <span id="tab" tab="third_tab">Третья вкладка...<br>3...</span>
    <span>Простой текст</span>
</div>

CSS

body {
    font-family: "Arial";
    font-size: 14px;
}

.nav {
    padding: 0px;

    list-style: none;
    cursor: pointer;
}
.nav li:hover {
    color: grey;
}
.nav li:checked {
    color: red;
}

#box {
    padding: 5px;
    
    border: 1px solid #ddd;
}
#box #tab {
    display: none;
}
#box #tab:first-child {
    display: block;
}

JavaScript

view_tab = function(tab) {
    var box = document.getElementById("box"),
        childs = box.getElementsByTagName("*");
    for (var i=0; i < childs.length; i++) {
        if (childs[i].getAttribute("tab")){
            childs[i].style.display = "none";
        }
        if (childs[i].getAttribute("tab") == tab) {
            childs[i].style.display = "block";
        }
    }
}