JSFiddle - React, Tailwind, and code Playground
HTML
<div id="some-id">
<div> <!-- NOTE: This is your first (0) tab -->
Contents0
</div>
<div> <!-- NOTE: This is your second (1) tab -->
Contents1
</div>
<div> <!-- NOTE: This is your third (2) tab -->
Contents2
<br />
Contents2
</div>
</div>
<div id="some-other-id">
<div> <!-- NOTE: This is your first (0) tab -->
Contents0
</div>
</div>
JavaScript
(
function($){
$.fn.tab=function(option){
var _this=$.extend({},this),
memory={
read:new Object(),
write:new Object()
},
option=$.extend(true,{},
{
'align':'left',
'select':'0',
'speed':'1000',
'style':{
'background-color':'rgb(48,60,74)',
'border':'rgb(17,22,29) 1px solid',
'border-bottom-left-radius':'3px',
'border-bottom-right-radius':'3px',
'overflow':'visible',
'padding':'5px'
},
'title':'',
'width':'670px'
},option),
variables={
isBusy:0,
currentTab:option.select
};
//~ Read the tabs into memory and empty the parent
memory.read=this.clone();
this.empty();
//~ Check to see if the tabs contain the URL hash
memory.read.find('>div').each(
function(tabIndex){
if(window.location.hash.length&&$(this).find(window.location.hash).length){
variables.currentTab=option.select=tabIndex;
return false;
}
}
);
//~ Write the new tabs into memory
//~ tabContainer
memory.write.tabContainer=memory.read.clone().empty().css(
{
'background-color':'rgb(32,39,53)',
'border':'#000 1px solid',
'border-radius':3,
'box-sizing':'border-box',
'margin':'0 auto',
'padding':2,
'position':'relative',
'width':option.width
}
...