Tabs with divs outside / jQuery /

by asdf

HTML

<ul class = "nav" id="tabs">
	<li class = "current">
		<a href="#" data-tab="tab-1">Tab1</a>		
	</li>
	<li>
		<a href="#" data-tab="tab-2">Tab2</a>
	</li>
	<li>
		<a href="#" data-tab="tab-3">Tab3</a>
	</li>
</ul>
<div id="tab-1" class="tab-content tab-content-current">Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 </div>
<div id="tab-2" class="tab-content">Text 2 Text 2 Text 2 Text 2 Text 2 Text 2
</div>
<div id="tab-3"  class="tab-content">Text 3 Text 3 Text 3 Text 3</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}
.nav {
	list-style: none;
	margin: 0;
	padding: 10px 10px 0;
    position: relative;
    border-bottom: 1px solid green;
}
/* .nav:after {
    content: "";
    display: table;
    clear: both;
} */
.nav li {
	/* float: left; */     /* if use float instead of inline-block then make clear with .nav:after */
    display: inline-block;
	margin: 0;
	padding: 0;
    margin-bottom: -1px;
}
.nav li a {
	text-decoration: none;
	display: block;
	margin: 0;
	padding: 15px;
    border: 1px solid orange;
}
.nav li.current a {
    background-color: #ffffff;
    border-bottom-color: transparent;
}
.tab-content {
    position:absolute;
    display: none;
    left: 0;
    width: 100%;
    border: 1px solid magenta;
    border-top: none;
    box-sizing: border-box;
}
.tab-content-current {
    display: block;
}

JavaScript

function makeTabControl ($tabs) {
    var lis = $tabs.find('li');
    
    function showTab($tab) {    
        $tab.addClass("current");
        var tabId = $tab.find('a').attr('data-tab');
        $('#' + tabId).addClass('tab-content-current');
    }
    
    function hideTab($tab) {
        $tab.removeClass("current");
        var tabId = $tab.find('a').attr('data-tab');
        $('#' + tabId).removeClass('tab-content-current');
    }
    
    lis.each(function(){
        $(this).click(function(){
            hideTab($tabs.find(".current"));
            showTab($(this));
        });
    });
}

makeTabControl($("#tabs"));