Как реализовать данные табы?

Question

изгибы тоесть дело именно в css

  
  
  $(".item").on('click', function() {
    $(".item ").removeClass("item--active").eq($(this).index()).addClass("item--active");
    var index = $(this).index();
    $(".desc").hide().eq(index).fadeIn()
  })

.item {
  border: 1px solid #F7FAFC;
  border-radius: 15px;
  margin-bottom: 10px;
}

.item--active {
  background-color: #F7FAFC;
  border-color: blue;
}

body {
  margin: 0px;
  padding: 20px;
}

.desc {
   background-color: #F7FAFC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="head">
  <div class="item item--active">1</div>
  <div class="item">2</div>
</div>

<div class="body">
  <div class="desc">desc 1</div>
  <div class="desc" style="display: none"> desc 2</div>
</div>

Answer 1

Как-то так:

<!-- js -->
$(".item").on('click', function() {
  $(".item ").removeClass("item--active").eq($(this).index()).addClass("item--active");
  var index = $(this).index();
  $(".desc").hide().eq(index).fadeIn()
})

/* css */

.item {
  border: 1px solid #F7FAFC;
  border-radius: 15px;
  margin-bottom: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 20px;
  /* анимация */
  transition: all .3s;
}

.item--active {
  background-color: #F7FAFC;
  border-color: blue;
}

body {
  margin: 0px;
  padding: 20px;
}

.desc {
  background-color: #F7FAFC;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="head">
  <div class="item item--active">title 1</div>
  <div class="item">title 2</div>
</div>

<div class="body">
  <div class="desc">desc 1</div>
  <div class="desc" style="display: none"> desc 2</div>
</div>

БЛОГ НА HUSL

Как реализовать данные табы?

Ответы (1 шт):