JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.js"></script>
<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/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<div id="container">
    <div id="tabs" class="ui top attached pointing secondary menu">

    </div>
    
    <div id="views">

    </div>
</div>

JavaScript

$.mockjax({
  url: "/tabs/tab1",
  responseText: "Tab 1 Content" +
                "<script type='text/javascript'>$(function() { alert('tab1 is selected'); }); <\/script>"
});

var test = {
    $ct: $('#container'),
    $content: $('#views'),
    $tabs: $('#tabs'),
    
    init: function() {
        var that = this;
        
        that.$ct.on('click', 'a.item', function() {
            that.selectTab($(this).attr('id'));
        });
        
        that.openTab('tab1', 'Tab 1');
        that.selectTab('tab1');
        
        this.$tabs.find('#tab1').click();
    },
    
    selectTab: function(id) {
        this.$tabs.find('#' + id).addClass('active').siblings().removeClass('active');
        this.$content.find('#' + id).addClass('active').siblings().removeClass('active');
    },

    openTab: function(id, name) {
        var that = this;
        
        //create tab view
        that.$content.append(
            '<div id="' + id + '" class="ui bottom attached tab" data-tab="' + id + '"></div>'
        );
        
        //create tab 'handle'
        that.$tabs.append(
            '<a id="' + id + '" class="item" data-tab="' + id + '">'+
                name +
            '</a>'
        )
        .find('> .item').last().tab( that.getTabParameters(id) );
    },
    
    getTabParameters: function(id) {
        var that = this;
        
        return {
            context: that.$ct,
            cache: true,
            auto: true,
            path: '/tabs',
            onTabInit: function(tabPath, parameterArray, historyEvent) {
                console.log('Initialized tab: ' + tabPath);
            },
            onTabLoad: function(tabPath, parameterArray, historyEvent) { //tab selected
                console.log('Selected tab: ' + tabPath);
            }
        };
    }
};


test.init();