0

При нажатии на логотип верхняя секция должна поменяться, но она просто пропадает. Если после нажать на другой логотип, то ничего не случитсявведите сюда описание изображения

$('.nav_rev > div').click(function() {
  const revID = $(this).data('revid');

  $('.nav_rev > div').not(this).removeClass('active');
  $('this').addClass('active');

  $('.item_rev').not(revID).removeClass('active');
  $('revID').addClass('active');
})
#reviews
    padding: 270px 0
    background-size: cover
    background-position: center
    background-repeat: no-repeat
    background-image: url('../img/reviews/bg.svg')
    .item_rev
        text-align: center
        display: none
        animation: opac .6s
        &.active
            display: block
        .quotes
            color: $dark_accent
            font-size: 22px
            margin: 0 auto 16px
            max-width: 660px
        >img
            width: 80px
            height: 80px
            border-radius: 50%
        >.name
            margin-top: 16px
        >.name, >.position
            color: #111
            font-weight: 900
    .line
        height: 1px
        width: 100%
        background-color: #DEC9FA
        margin: 56px 0
    .nav_rev
        display: -webkit-flex
        display: -moz-flex
        display: -q-flex
        display: flex
        align-items: center
        justify-content: space-between
        flex-wrap: wrap
        >div
            cursor: pointer
            width: 16%
            filter: grayscale(1)
            transition: all .4s ease
            display: -webkit-flex
            display: -moz-flex
            display: -q-flex
            display: flex
            align-items: center
            justify-content: center
            &.active
                filter: grayscale(0)
                transform: scale(1.1)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<section id="reviews">
  <div class="container">
    <div id="rev_1" class="item_rev active">
      <div class="quotes">Tonkean — это сервис для бизнес-аналитики. Он автоматизирует отслеживание и мониторинг критически важных бизнес-данных. ИИ активно ищет обновления команд и организует их в одну панель вместе с ключевыми показателями из других используемых инструментов.
      </div>
      <img src="img/reviews/avatar.png" alt="ava">
      <div class="name">Guillaume Cabane</div>
      <div class="position">CTO @ tonkean</div>
    </div>
    <div id="rev_2" class="item_rev">
      <div class="quotes">Lorem ipsum dolor sit amet consectetur, adipisicing elit. A saepe optio est ullam mollitia minus placeat consequatur, facilis assumenda, perspiciatis ab similique odit maxime? Iure rem eos provident impedit placeat.
      </div>
      <img src="img/reviews/avatar.png" alt="ava">
      <div class="name">Guillaume Cabane</div>
      <div class="position">CTO @ tonkean</div>
    </div>
    <div id="rev_3" class="item_rev">
      <div class="quotes">это онлайн-сервис, который позволяет собирать информацию по заданным параметрам поиска. Вы можете искать информацию по двум целям: По людям, используя адреса электронной почты. По компаниям, используя доменные имена.
      </div>
      <img src="img/reviews/avatar.png" alt="ava">
      <div class="name">Guillaume Cabane</div>
      <div class="position">CTO @ tonkean</div>
    </div>
    <div id="rev_4" class="item_rev">
      <div class="quotes">Каждый из этих подходов имеет право на жизнь, так как позволяет оптимизировать ту или иную метрику разработки, жертвуя чем-то другим. Например, ускоряя TTM взамен на повышенную скорость накопления технического долга.
      </div>
      <img src="img/reviews/avatar.png" alt="ava">
      <div class="name">Guillaume Cabane</div>
      <div class="position">CTO @ tonkean</div>
    </div>
    <div id="rev_5" class="item_rev">
      <div class="quotes">>немецкая автомобилестроительная компания, выпускала легковые автомобили, мотоциклы, велосипеды, микроавтобусы и другую технику.
      </div>
      <img src="img/reviews/avatar.png" alt="ava">
      <div class="name">Guillaume Cabane</div>
      <div class="position">CTO @ tonkean</div>
    </div>
    <div class="line"></div>
    <div class="nav_rev">
      <div data-revid="#rev_1" class="active"><img src="img/reviews/partner_1.svg" alt=""></div>
      <div data-revid="#rev_2"><img src="img/reviews/partner_2.svg" alt=""></div>
      <div data-revid="#rev_3"><img src="img/reviews/partner_3.svg" alt=""></div>
      <div data-revid="#rev_4"><img src="img/reviews/partner_4.svg" alt=""></div>
      <div data-revid="#rev_5"><img src="img/reviews/partner_5.svg" alt=""></div>
    </div>
  </div>
</section>

1 ответ 1

0

Ниже пример с вашим кодом, в котором все работает переключение данных.

Когда вы пытаетесь передать данные в селекто из переменной, ее не надо оборачивать в кавычки, это воспринимается как текст, а не переменная. Например для переменной revID выбоку надо делать $(revID)

    $('.nav_rev > div').click(function() {
      const revID = $(this).data('revid');

      $('.nav_rev > div').not(this).removeClass('activebtn');
      $(this).addClass('activebtn');

      $('.item_rev').not(revID).removeClass('active');
      $(revID).addClass('active');
    })
    .item_rev {
        display: none;
    }
    .active {
        display: block;
    }

    .activebtn {
        background-color: #22AA11;
    }

    .nav_rev {
        display: flex;
    }

    .nav_rev > div > button {
        background-color: transparent;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="reviews">
    <div class="container">
        <div id="rev_1" class="item_rev active">
            <div class="quotes">Tonkean — это сервис для бизнес-аналитики. Он автоматизирует отслеживание и мониторинг критически важных бизнес-данных. ИИ активно ищет обновления команд и организует их в одну панель вместе с ключевыми показателями из других используемых инструментов.
            </div>
            <img src="img/reviews/avatar.png" alt="ava">
            <div class="name">1 - Guillaume Cabane</div>
            <div class="position">1 - CTO @ tonkean</div>
        </div>
        <div id="rev_2" class="item_rev">
            <div class="quotes">Lorem ipsum dolor sit amet consectetur, adipisicing elit. A saepe optio est ullam mollitia minus placeat consequatur, facilis assumenda, perspiciatis ab similique odit maxime? Iure rem eos provident impedit placeat.
            </div>
            <img src="img/reviews/avatar.png" alt="ava">
            <div class="name">2 - Guillaume Cabane</div>
            <div class="position">2 - CTO @ tonkean</div>
        </div>
        <div id="rev_3" class="item_rev">
            <div class="quotes">это онлайн-сервис, который позволяет собирать информацию по заданным параметрам поиска. Вы можете искать информацию по двум целям: По людям, используя адреса электронной почты. По компаниям, используя доменные имена.
            </div>
            <img src="img/reviews/avatar.png" alt="ava">
            <div class="name">3 - Guillaume Cabane</div>
            <div class="position">3 - CTO @ tonkean</div>
        </div>
        <div id="rev_4" class="item_rev">
            <div class="quotes">Каждый из этих подходов имеет право на жизнь, так как позволяет оптимизировать ту или иную метрику разработки, жертвуя чем-то другим. Например, ускоряя TTM взамен на повышенную скорость накопления технического долга.
            </div>
            <img src="img/reviews/avatar.png" alt="ava">
            <div class="name">4 - Guillaume Cabane</div>
            <div class="position">4 - CTO @ tonkean</div>
        </div>
        <div id="rev_5" class="item_rev">
            <div class="quotes">>немецкая автомобилестроительная компания, выпускала легковые автомобили, мотоциклы, велосипеды, микроавтобусы и другую технику.
            </div>
            <img src="img/reviews/avatar.png" alt="ava">
            <div class="name">5 - Guillaume Cabane</div>
            <div class="position">5 - CTO @ tonkean</div>
        </div>
        <div class="line"></div>
        <hr />
        <div class="nav_rev">
            <div data-revid="#rev_1" class="active"><button>1</button><img src="img/reviews/partner_1.svg" alt=""></div>
            <div data-revid="#rev_2"><button>2</button><img src="img/reviews/partner_2.svg" alt=""></div>
            <div data-revid="#rev_3"><button>3</button><img src="img/reviews/partner_3.svg" alt=""></div>
            <div data-revid="#rev_4"><button>4</button><img src="img/reviews/partner_4.svg" alt=""></div>
            <div data-revid="#rev_5"><button>5</button><img src="img/reviews/partner_5.svg" alt=""></div>
        </div>
    </div>
</section>

2
  • Спасибо огромное! 9 фев в 13:10
  • @МиленаМкртчян Если ответ вас устраивает, нажмите галочку, слева от ответа. Если ответ понравился, за него можно проголосовать. Это лучшее спасибо на данном ресурсе. )
    – SwaD
    9 фев в 13:12

Ваш ответ

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

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