JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.js"></script>
<div id="main-tabs" class="ui top attached pointing secondary menu">
    <a id="tab1" class="active item" data-tab="tab1">
        Tab 1
    </a>
</div>

<div id="main-content">
    <div id="tab1" class="active ui bottom attached tab" data-tab="tab1">
        Tab 1 content
        <script>
            $(function() {
                alert('tab1 is selected');
            });
        </script>
    </div>
</div>

JavaScript

$('a#tab1').on('click', function() {
    $('a#tab1').addClass('active').siblings().removeClass('active');
    $('div#tab1').addClass('active').siblings().removeClass('active');
});

$('a#tab1').click();