0

  $(".tab__item").click(function() {
    $(".tab__item").removeClass("tab__item--active").eq($(this).index()).addClass("tab__item--active");
    var index = $(this).index();
    $(".tab__box").hide().eq(index).fadeIn().addClass('tab__box--active');
  })
.tab__wrap{
  display: flex;
}

.tab__item {
  width: 50%;
  padding: 15px;
}

.tab__item--active {
  color: blue;
  background: red;
}

.tab__box--active {
  background-color: red;
}

p {
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab__wrap">
  <div class="tab__item tab__item--active">no active tab</div>
  <div class="tab__item"> active tab</div>
</div>

<div class="tab__block">
  <div class="tab__box  tab__box--active">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui architecto dolore sed, perspiciatis incidunt in, nemo iste ut accusamus possimus animi quo eligendi ex voluptatem nihil! Doloremque harum, doloribus nisi.</p>
  </div>
  <div class="tab__box" style="display: none">
    <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui architecto dolore sed, perspiciatis incidunt in, nemo iste ut accusamus possimus animi quo eligendi ex voluptatem nihil! Doloremque harum, doloribus nisi.</p>
  </div>
</div>

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

1 ответ 1

3

Если для любого количества табов, то надо всего два шага:

  1. Создать псевдо элемент для имитирования внутреннего скругления
  2. Сделать чтобы область табов перекрывалась с областью контента на величину скругления

Остальное игра с цветом фона.

$(".tab__item").click(function() {
  var index = $(this).index();
  var wrapper = $(this).closest(".tab__wrap");

  wrapper
    .find(".tab__item")
    .removeClass("tab__item--active")
    .eq(index)
    .addClass("tab__item--active");

  wrapper
    .nextAll('.tab__block')
    .first()
    .find(".tab__box")
    .hide()
    .eq(index)
    .fadeIn()
    .addClass('tab__box--active');
});
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 10px;
  --radius: 20px;
  --color: firebrick;
}

.tab__wrap {
  display: flex;
  overflow: hidden;
  padding-bottom: var(--radius);
}

.tab__wrap > * {
  flex: 1;
  padding: var(--radius);
  position: relative;
  background: white;
  border-radius: 0 0 var(--radius) var(--radius);
}

.tab__block {
  padding: var(--radius);
  background: var(--color);
  border-radius: var(--radius);
  margin-top: calc(-1 * var(--radius));
}

.tab__item--active {
  color: navy;
  background: var(--color);
  border-radius: var(--radius) var(--radius) 0 0;
}

.tab__item--active::before {
  content: "";
  position: absolute;
  background: var(--color);
  height: calc(2 * var(--radius));
  bottom: calc(-1 * var(--radius));
  left: calc(-1 * var(--radius));
  right: calc(-1 * var(--radius));
  z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab__wrap">
  <div class="tab__item tab__item--active">first</div>
  <div class="tab__item">second</div>
</div>

<div class="tab__block">
  <div class="tab__box tab__box--active">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui architecto dolore sed, perspiciatis incidunt in, nemo iste ut accusamus possimus animi quo eligendi ex voluptatem nihil! Doloremque harum, doloribus nisi.</p>
  </div>
  <div class="tab__box" style="display: none">
    <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui architecto dolore sed, perspiciatis incidunt in, nemo iste ut accusamus possimus animi quo eligendi ex voluptatem nihil! Doloremque harum, doloribus nisi.</p>
  </div>
</div>

<br>

<div class="tab__wrap">
  <div class="tab__item tab__item--active">Tab 1</div>
  <div class="tab__item">Tab 2</div>
  <div class="tab__item">Tab 3</div>
  <div class="tab__item">Tab 4</div>
</div>

<div class="tab__block">
  <div class="tab__box tab__box--active">
    <p>Text 1</p>
  </div>
  <div class="tab__box" style="display: none">
    <p>Text 2</p>
  </div>
  <div class="tab__box" style="display: none">
    <p>Text 3</p>
  </div>
  <div class="tab__box" style="display: none">
    <p>Text 4</p>
  </div>
</div>

ps: немного подправил ваш js, чтобы отобразить два варианта табуляции на одной странице, но не используйте этот код в продакшине, он плохой

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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