JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<div class="viewSwitchParent">
    <ul class="periodTabs tabSwitchSubject">
        <li class="monthlyview active" data-activeclass="monthlyview">MONTHLY</li>
        <li class="quarterlyview" data-activeclass="quarterlyview">QUARTERLY</li>
    </ul>
    AVERAGE ANNUAL RETURNS
    <span class="MOD_super">
        <span class="num monthlyview" data-number="1">1</span>
        <span class="num quarterlyview" data-number="6">6</span>
        <span class="num monthlyview" data-number="11">11</span>
    </span>
</div>

CSS

.monthlyview, quarterlyview { display: none; }
.monthlyviewActiveTab .monthlyview,
.quarterlyviewActiveTab .quarterlyview { display: inline; }

JavaScript

//  Handles tab switchers
    (function () {

        $("ul.tabSwitchSubject li").live("click", function () {
            var $me = $(this);
            var $container = $me.closest('.viewSwitchParent');

            $me
                .siblings()
                .removeClass("active")
                .end()
                .addClass("active");

            var oldActiveClass = $container.data("activeclass");
            var newActiveClass = $me.data("activeclass") + "ActiveTab";

            if (oldActiveClass && oldActiveClass.length > 0) {
                $container
                    .removeClass(oldActiveClass);
            }

            $container
                .addClass(newActiveClass)
                .data("activeclass", newActiveClass);
        });

        //  Trigger the click on the first LI in each of the
        //  tab switchers...
        $("ul.tabSwitchSubject").each(function () {
            $("li:first", this).trigger("click");
        });
    })();