How to create a Tabs without bootstrap

How to create tabs without bootstrap, Here we are using simple javascript code

One of the better ways to arrange an amount of content on one page is to apply tabs.

Tab based navigation provides an easy and powerful mechanism to handle a huge amount of content within a small area.tabs are used to separate the content into different panes. The user can view the content through switching between the panes without leaving the page.

You may also enable tabs via JavaScript

HTML

<div class="tabsingle br_left tab-active" target="1" style="cursor:pointer;"> Tab1 </div>
<div class="tabsingle br_left" target="2" style="cursor:pointer;"> Tab2 </div>
<div class="tabsingle br_left" target="3" style="cursor:pointer;"> Tab3 </div>
<div id="div1" class="targetdiv">
Tab1 Content Here
</div>			 
<div id="div2" class="targetdiv" style="display:none;">
Tab2 Content Here
</div>			 
<div id="div3" class="targetdiv" style="display:none;">
Tab3 Content Here
</div>

CSS

.tab-active{color:white;background:darkseagreen;}
.tabsingle{display:inline-block;padding:10px 30px;outline:1px solid darkseagreen;}
.targetdiv{padding:30px;border:1px solid darkseagreen;}

 

JavaScript

jQuery(function(){
jQuery('.tabsingle').click(function(){
jQuery('.targetdiv').hide();
jQuery('#div'+$(this).attr('target')).show();
jQuery('.tabsingle').removeClass('tab-active');
$(this).addClass("tab-active");
});
});