$(function() {
$('.nav a').click(function(e) {
e.preventDefault()
$('.nav li').removeClass('active')
var h = $(this).attr('href')
$(this).parent().addClass('active')
$('.tab-pane').removeClass('active')
$(h).addClass('active')
})
})
html {
background: #ddd;
margin: 20px 10px auto;
font-family: Sans-serif;
}
.nav {
/* Using flex for easy adjustment to any number of tabs */
display: flex;
padding: 0;
margin: 0 0 -10px;
}
.nav li {
flex: 1 0 auto;
list-style: none outside none;
position: relative;
border-radius: 10px 10px 0 0;
}
.nav .active {
z-index: 2;
background: #fff;
}
.nav a {
display: block;
padding: 10px 40px 20px;
text-decoration: none;
text-align: center;
color: #777;
background: #f5f5f5;
border: 1px solid #aaa;
border-radius: 10px 10px 0 0;
}
.nav .active a {
background: #fff;
border-bottom: 0;
color: #111;
padding: 10px 40px 11px;
box-shadow: -3px -1px 2px rgba(0, 0, 0, .05), 3px -1px 2px rgba(0, 0, 0, .05);
}
.nav .active:first-child {
border-left: 1px solid #aaa;
}
.nav .active:first-child a {
border-left: 0;
}
.nav .active:last-child {
border-right: 1px solid #aaa;
}
.nav .active:last-child a {
border-right: 0;
}
.nav .active:not(:first-child) a:before,
.nav .active:not(:last-child) a:after {
/* Rounded out corners are generated elements */
content: '';
position: absolute;
width: 10px;
height: 10px;
bottom: 9px;
}
.nav .active:not(:first-child) a:before {
/* Implementing the left rounded out tab here. */
background: radial-gradient(circle at 0 0, transparent 8px, #aaa 9px, #fff 10px);
left: -9px;
}
.nav .active:not(:last-child) a:after {
/* Implementing the right rounded out tab here. */
background: radial-gradient(circle at 100% 0, transparent 8px, #aaa 9px, #fff 10px);
right: -9px;
}
.tab-content {
border: 1px solid #aaa;
border-radius: 10px;
box-shadow: 2px 1px 10px rgba(0, 0, 0, .2), 0 6px 30px rgba(0, 0, 0, .08);
background: #fff;
color: #111;
padding: 20px;
position: relative;
z-index: 1;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1</div>
<div class="tab-pane" id="profile">2</div>
<div class="tab-pane" id="settings">3</div>
</div>