2

Добрый вечер. Необходимо сделать резиновые вкладки-табы, как на картинке.

введите сюда описание изображения

В какую сторону копать?

2
  • а что тут на картинке вообще изображено??
    – mymedia
    Commented 16 окт. 2017 в 20:33
  • Предположу что это вкладки, похоже на хромовские и светлая является октивной Commented 16 окт. 2017 в 23:36

1 ответ 1

3

Вот например, можете копать в сторону 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.