0

изгибы тоесть дело именно в 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>

1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 30 дек 2021 в 17:30

1 ответ 1

0

Как-то так:

<!-- 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>

4
  • так дело именно в css 30 дек 2021 в 18:20
  • Ну да, тут padding виноват
    – Ananazz
    30 дек 2021 в 18:28
  • всмысле? я говорила об изгибе.. 30 дек 2021 в 18:29
  • Прошу прощение, не туда ответил )))) Но да, все дело лишь в css.
    – Ananazz
    30 дек 2021 в 18:31

Ваш ответ

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

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