Форум

Tipylja · #1 (**permalink**) 15.10.2018, 15:54

Здравствуйте. на странице есть несколько секций с одинаковой разметкой, по смыслу это:
Горячие новинки, Хиты продаж, Акционные товары и т.д
Вот код

<section class="hitProducts layout__hitProducts">
    <div class="titleLine hitProducts__title">
        <span class="titleLine__text">Заголовок первого уровня</span>
    </div>
    <div class="hitProducts__tabs tabs">
        <div class="tabs__inner">
            <div class="tabs__item tabs__item--active">Полы</div>
            <div class="tabs__item">Потолки</div>
            <div class="tabs__item">Двери</div>
        </div>
    </div>
    <div class="layout__row">
        <div class="hitProducts__inner">
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->           
        </div>
    </div>


</section>

У каждого из таких блоков есть "табы", которые переключают категории, в зависимости от этого выводятся разные айтемы. Это отступление что бы был понятен смысл.
При загрузке страницы в каждом из таких блоков активен(имеет класс "tabs__item tabs__item--active") первый таб. Подскажите как при клике на допустим второй таб "Потолки", дать ему класс "tabs__item tabs__item--active", а у первого таба его убрать, оставить только "tabs__item". И таких блоков как "hitProducts" на странице много, нужно что бы табы у них переключались независимо друг от друга.

рони · #2 (**permalink**) 15.10.2018, 16:10

Tipylja,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> .tabs__item--active{
      background-color: #8B4513;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
   $(".tabs__inner").on("click", ".tabs__item", function(event) {
   $(".tabs__item", event.delegateTarget).removeClass("tabs__item--active")
   $(this).addClass("tabs__item--active")
})
});
  </script>
</head>

<body>
<section class="hitProducts layout__hitProducts">
    <div class="titleLine hitProducts__title">
        <span class="titleLine__text">Заголовок первого уровня</span>
    </div>
    <div class="hitProducts__tabs tabs">
        <div class="tabs__inner">
            <div class="tabs__item tabs__item--active">Полы</div>
            <div class="tabs__item">Потолки</div>
            <div class="tabs__item">Двери</div>
        </div>
    </div>
    <div class="layout__row">
        <div class="hitProducts__inner">
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        </div>
    </div>


</section>
<section class="hitProducts layout__hitProducts">
    <div class="titleLine hitProducts__title">
        <span class="titleLine__text">Заголовок первого уровня</span>
    </div>
    <div class="hitProducts__tabs tabs">
        <div class="tabs__inner">
            <div class="tabs__item tabs__item--active">Полы</div>
            <div class="tabs__item">Потолки</div>
            <div class="tabs__item">Двери</div>
        </div>
    </div>
    <div class="layout__row">
        <div class="hitProducts__inner">
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        <!--Айтем-->
        </div>
    </div>


</section>
</body>
</html>

Tipylja · #3 (**permalink**) 15.10.2018, 18:46

Благодарю

Форум

Справочник

Discord чат

Курсы javascript