Tabs / jQuery /

by asdf

HTML

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

CSS

.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;
}
.nav li div {
    position:absolute;
    display: none;
    left: 0;
    width: 100%;
    border: 1px solid magenta;
    border-top: none;
    box-sizing: border-box;
}
.nav li.current div {
    display: block;
}

JavaScript

var nav = $(".nav li");


nav.each(function(){
    $(this).click(function(){
        $(".current").removeClass("current");
        $(this).addClass("current");
    });
});