Добрый вечер. Необходимо сделать резиновые вкладки-табы, как на картинке.
В какую сторону копать?
Вот например, можете копать в сторону before/after
, border-radius
:
$(function() {
$("#tabs").on("click", ".tab", function() {
var tabs = $("#tabs .tab"),
cont = $("#tabs .tab-cont");
tabs.removeClass("active");
cont.removeClass("active");
$(this).addClass("active");
cont.eq($(this).index()).addClass("active");
return false;
});
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
color: white;
margin: 0;
padding: 0;
}
.tabs {
position: relative;
background: red;
}
.tabs:before,
.tabs:after {
content: '';
display: table;
}
.tabs:after {
clear: both;
}
.tab {
position: relative;
float: left;
width: 25%;
background: red;
padding: 10px;
border-top-right-radius: 25px 50%;
border-bottom-left-radius: 25px 50%;
}
.tabs .tab:first-child {
border-bottom-left-radius: 0
}
.tab.active {
background: blue;
}
.tab.active:before {
content: '';
position: absolute;
width: 25px;
height: 50%;
background: blue;
top: 0;
left: -25px;
}
.tab.active:after {
content: '';
position: absolute;
width: 25px;
height: 100%;
border-top-right-radius: 25px 50%;
background: red;
top: 0;
left: -25px;
}
.tab.active .tab-helper{
display:block;
position: absolute;
width: 25px;
height: 50%;
background: blue;
bottom: 0;
right: -25px;
}
.tab.active .tab-helper:after {
content: '';
position: absolute;
width: 25px;
height: 100%;
border-bottom-left-radius: 25px 50%;
background: red;
bottom: 0;
right: -25px;
}
.content {
background: blue;
height: 200px;
}
.tab-cont {
display: none;
padding: 15px 10px;
}
.tab-cont.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs">
<div class="tabs">
<div class="tab active"><i class=tab-helper></i>Вкладка №1</div>
<div class="tab"><i class=tab-helper></i>Вкладка №2</div>
<div class="tab"><i class=tab-helper></i>Вкладка №3</div>
<div class="tab"><i class=tab-helper></i>Вкладка №4</div>
</div>
<div class="content">
<div class="tab-cont active">
Контент №1
</div>
<div class="tab-cont">
Контент №2
</div>
<div class="tab-cont">
Контент №3
</div>
<div class="tab-cont">
Контент №4
</div>
</div>
</div>