JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="wrapper">
	<a href="javascript:;" data-url="bear.html">데모1</a>
</div>
<button id="add_tab">Add Tab</button>
<div id="tabs">
	<ul></ul>
</div>

CSS

#tabs {
    margin-top: 1em;
}
#tabs li .ui-icon-close {
    float: left;
    margin: 0.4em 0.2em 0 0;
    cursor: pointer;
}
#add_tab {
    cursor: pointer;
}
.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

JavaScript

$(function () {
	var tabsInfo = JSON.parse(localStorage.getItem("tabsInfo")) || {};
    var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
        tabCounter = Object.keys(tabsInfo).length;
    var tabs = $("#tabs").tabs({
        activate: function(event, ui) {
            localStorage.setItem("activeTab", ui.newPanel.attr("id"));
        }
    });
    
    var tab_id = 0;
    if (tabCounter == 0) {
    	tab_id = 1;
    	addTab();
    } else {
    	tab_id = Object.keys(tabsInfo).sort(
   		    function (a, b) {
   		        return b.split("-")[1] - a.split("-")[1];
   		    }
   		)[0].split("-")[1];
    	tab_id = Number(tab_id) + 1;
    }
    function addTab() {
        var label = "Tab " + tab_id,
            id = "tabs-" + tab_id,
            li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
            tabContentHtml = "<div>Tab " + tab_id + " content.</div>"
            		+ "<div class='iframe-container'> <iframe src='' name='tab-frame'></iframe></div>";
          
        $("#tabs").find(".ui-tabs-nav").append(li);
        $("#tabs").append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
        $("#tabs").tabs("refresh");

        tabs.find('a[href="#' + id + '"]').trigger("click");
   
        var tabsInfo = JSON.parse(localStorage.getItem("tabsInfo")) || {};
        tabsInfo[id] = { label: label, content: tabContentHtml };
        localStorage.setItem("tabsInfo", JSON.stringify(tabsInfo));

        tab_id++;
    }

    for (var id in tabsInfo) {
        var label = tabsInfo[id].label;
        var tabContentHtml = tabsInfo[id].content;
        var li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label));
        $("#tabs").find(".ui-tabs-nav").append(li);
        $("#tabs").append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
    }
    $("#tabs").tabs("refresh");
  
    var activeTabId =...