JSFiddle - React, Tailwind, and code Playground

by FrictionlessPulley

HTML

<nav class="inner-nav">
    <ul>
        <li><a href="#content1">Link1</a></li>
        <li><a href="#content2">Link2</a></li>
        <li><a href="#content3">Link3</a></li>
        <li><a href="#content4">Link4</a></li>
        <li><a href="#content5">Link5</a></li>
        <li><a href="#content6">Link6</a></li>
    </ul>
</nav>

<article id="content1" class="content">A</article>
<article id="content2" class="content">B</article>
<article id="content3" class="content">C</article>
<article id="content4" class="content">D</article>
<article id="content5" class="content">E</article>
<article id="content6" class="content">F</article>

CSS

.active {background-color: yellow;}

JavaScript

$(document).ready(function () {
    $(".content").hide();
    $(".content:first").show();
    $(".inner-nav li:first").addClass("active");
    $(".inner-nav a").click(function(){
        $(".inner-nav li").removeClass("active");
        $(this).parent().addClass("active");
        var currentTab = $(this).attr("href");
        $(".content").hide();
        $(currentTab).show();

    });
});