JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="tabs" class="tabs-bottom ui-tabs ui-widget ui-widget-content ui-corner-all">
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false">
<div>
<ul>
<li><a href="deny.html">e-sklep</a>
</li>
</ul>
</div>
</div>
<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;"></div>
<div class="tabs-spacer" style="height:0px"></div>
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-bottom" role="tablist">
<li role="tab" class="ui-state-default ui-tabs-active ui-state-active ui-corner-bottom" tabindex="0" aria-controls="ui-tabs-1" aria-labelledby="ui-id-1" aria-selected="true"><a href="tab_index.html?ctx=1" role="presentation" class="ui-tabs-anchor" tabindex="-1" id="ui-id-1">HEADQUARTER</a>
</li>
<li role="tab" class="ui-state-default ui-corner-bottom" tabindex="-1" aria-controls="ui-tabs-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="tab_index.html?ctx=1" role="presentation" class="ui-tabs-anchor" tabindex="-1" id="ui-id-2">HEADQUARTER</a>
</li>
</ul>
</div>
CSS
.ui-tabs-panel .ui-widget-content .ui-corner-bottom{
height:30px;
}
JavaScript
$(function () {
var tabs = $("#tabs").tabs({
beforeLoad: function (event, ui) {
ui.jqXHR.error(function () {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
});
}
});
// move the nav to the bottom
$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
// TB: zmiana zawartości
$.changeContent = function (url) {
var currentTabIndex = tabs.tabs("option", "active");
var tab = $(tabs.data('uiTabs').tabs[currentTabIndex]);
tab.find('.ui-tabs-anchor').attr('href', url);
// If cached initially. Remove cache then
tab.data("loaded", false);
tabs.tabs("load", currentTabIndex);
}
// TB: actual addTab function: adds new tab using the input from the form above
$.addTab = function (nazwa, url, ctx) {
tabs.find(".ui-tabs-nav").append('<li role="presentation"><a href="tab_struktura.html" role="tab">Nazwa</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>');
tabs.tabs("refresh");
}
});