JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div class="all">
    <ul class="links">
        <li class="active"><a href="#">Link 1</a>

        </li>
        <li><a href="#">Link 2</a>

        </li>
        <li><a href="#">Link 3</a>

        </li>
        <li><a href="#">Link 4</a>

        </li>
    </ul>
    <div class="content">
        <div id="cont1">
            <p>Content 1</p>
        </div>
        <div id="cont2">
            <p>Content 2</p>
        </div>
        <div id="cont3">
            <p>Content 3</p>
        </div>
        <div id="cont4">
            <p>Content 4</p>
        </div>
    </div>
</div>

CSS

.content div {
    display:none;
}

JavaScript

var list = document.getElementsByTagName('ul');
var links = list[0].getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].onclick = function () {
        var target = this.innerHTML.substr(-1);
        var divs = document.getElementsByClassName("content");
        var subdivs = divs[0].getElementsByTagName('div');
        for (var i = 0; i < subdivs.length; i++) subdivs[i].style.display = 'none';
        document.getElementById('cont' + target).style.display = 'block';
    };
};