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 that you have read and understand our privacy policy and code of conduct.

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