БЛОГ НА HUSL


Как при наведении на пункт меню, добавлять класс к элементу в другом блоке?

Автор вопроса: Юрий С.

Есть вот такой код:

<div id="catalog">
  <div id="title_catalog">Каталог</div>
  <div id="content_catalog">
    <ul>
      <li><a href="#" title="Школьная мебель">Школьная мебель</a></li>
      <li><a href="#" title="Гостиные">Гостиные</a></li>
      <li><a href="#" title="Детская мебель">Детская мебель</a></li>
      <li><a href="#" title="Мебель для столовых">Мебель для столовых</a></li>
      <li><a href="#" title="Мебель для гостиниц">Мебель для гостиниц</a></li>
      <li><a href="#" title="Мебель для актовых залов">Мебель для актовых залов</a></li>
      <li><a href="#" title="Офисная мебель">Офисная мебель</a></li>
      <li><a href="#" title="Мягкая мебель">Мягкая мебель</a></li>
      <li><a href="#" title="Мебель для кухни">Мебель для кухни</a></li>
      <li><a href="#" title="Мебель для спальни">Мебель для спальни</a></li>
      <li><a href="#" title="Мебель из массива">Мебель из массива</a></li>
    </ul>
  </div>
</div>
<div id="base">
  <div id="slider">
  <div class="slider-news"> <a href="#" title="Школьная мебель"><img src="images/Catalog/Uch  mebel/nach_klasy_800_600_1.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Гостиные"><img src="images/Catalog/Other/Adelina/Adelina1 800_600.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Детская мебель"><img src="images/Catalog/Det mebel/detskaja_800x600.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Мебель для столовых"><img src="images/Catalog/kuhnja/KSMS-04A/KMSS-04-A_800_600.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Мебель для гостиниц"><img src="images/Catalog/Hotel/sanat_800_600.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Мебель для актовых залов"><img src="images/Catalog/A_Zal/ik/ik_800_600.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Офисная мебель"><img src="images/Catalog/Ofice/NOM-04/nom04_1_800_600.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Мягкая мебель"><img src="images/Catalog/M_mebel/uglovoj-dlja-kafe/divan_uglovoj_dlja_kafe_800_600.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Мебель для кухни"><img src="images/Catalog/kuhnja/post3u/post3U_800_600.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Мебель для спальни"><img src="images/Catalog/Krovati/Krovat_Valeri/Krovat_Valeri_novinka_800x600.jpg"</a> </div>
  <div class="slider-news"> <a href="#" title="Мебель из массива"><img src="images/Catalog/Massiv/tranformer/transformer_sst_800_600.jpg"</a> </div>
  </div>
</div>

Нужно, чтобы при наведении на пункт в каталоге изменялся класс соответствующего div (свойство title и содержимое li совпадает) в слайдере на "имя класса + active"

Как изменить в пределах одного блока я разобрался (через jQuery), а вот в разных блоках не получается.


Источник

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

Автор решения: Aleksandr Pyzh 
$( ".class1" ).hover(function() {
  $("your div").addClass("class name");
});
→ Ссылка
Автор решения: CbIPoK2513

Вариант при нажатии:

$('#content_catalog li:first-child, #slider .slider-news:first-child').addClass('active');// при загрузке страницы выдаём первым элементам класс ative

// При нажатии на ссылку выполняем следующее:
$('#content_catalog').on('click', 'li', function() {
  if(!$(this).hasClass('active')) { // Проверяем, нажата ли ссылка без класса active, если да - то..
    $('#content_catalog li.active, #slider .slider-news.active').removeClass('active'); // удаляем класс active с "активной" ссылки и слайда
    $(this).addClass('active'); // добавляем нажатой ссылке класс .active
    $('#slider .slider-news').eq($(this).index()).addClass('active'); // и добавляем класс актив тому слайду, чей порядковый номер равен порядковому номеру нажатой ссылки
  }
  return false; // так как ссылки имеют переход по странице, то мы его "отключим"
});
#content_catalog li.active {
  color: green;
}

#slider .slider-news {
  display: none;
}

#slider .slider-news.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="catalog">
  <div id="title_catalog">Каталог</div>
  <div id="content_catalog">
    <ul>
      <li><a href="#" title="Школьная мебель">Школьная мебель</a></li>
      <li><a href="#" title="Гостиные">Гостиные</a></li>
      <li><a href="#" title="Детская мебель">Детская мебель</a></li>
      <li><a href="#" title="Мебель для столовых">Мебель для столовых</a></li>
      <li><a href="#" title="Мебель для гостиниц">Мебель для гостиниц</a></li>
      <li><a href="#" title="Мебель для актовых залов">Мебель для актовых залов</a></li>
      <li><a href="#" title="Офисная мебель">Офисная мебель</a></li>
      <li><a href="#" title="Мягкая мебель">Мягкая мебель</a></li>
      <li><a href="#" title="Мебель для кухни">Мебель для кухни</a></li>
      <li><a href="#" title="Мебель для спальни">Мебель для спальни</a></li>
      <li><a href="#" title="Мебель из массива">Мебель из массива</a></li>
    </ul>
  </div>
</div>
<div id="base">
  <div id="slider">
    <div class="slider-news">
      <a href="#" title="Школьная мебель"><img src="images/Catalog/Uch  mebel/nach_klasy_800_600_1.jpg"></a> </div>
    <div class="slider-news">
      <a href="#" title="Гостиные"><img src="images/Catalog/Other/Adelina/Adelina1 800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Детская мебель"><img src="images/Catalog/Det mebel/detskaja_800x600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для столовых"><img src="images/Catalog/kuhnja/KSMS-04A/KMSS-04-A_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для гостиниц"><img src="images/Catalog/Hotel/sanat_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для актовых залов"><img src="images/Catalog/A_Zal/ik/ik_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Офисная мебель"><img src="images/Catalog/Ofice/NOM-04/nom04_1_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мягкая мебель"><img src="images/Catalog/M_mebel/uglovoj-dlja-kafe/divan_uglovoj_dlja_kafe_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для кухни"><img src="images/Catalog/kuhnja/post3u/post3U_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для спальни"><img src="images/Catalog/Krovati/Krovat_Valeri/Krovat_Valeri_novinka_800x600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель из массива"><img src="images/Catalog/Massiv/tranformer/transformer_sst_800_600.jpg"> </a> </div>
  </div>
</div>

Вариант при наведение:

$('#content_catalog li:first-child, #slider .slider-news:first-child').addClass('active');// при загрузке страницы выдаём первым элементам класс ative

// При нажатии на ссылку выполняем следующее:
$('#content_catalog').on('mouseenter', 'li', function() {
  if(!$(this).hasClass('active')) { // Проверяем, нажата ли ссылка без класса active, если да - то..
    $('#content_catalog li.active, #slider .slider-news.active').removeClass('active'); // удаляем класс active с "активной" ссылки и слайда
    $(this).addClass('active'); // добавляем нажатой ссылке класс .active
    $('#slider .slider-news').eq($(this).index()).addClass('active'); // и добавляем класс актив тому слайду, чей порядковый номер равен порядковому номеру нажатой ссылки
  }
  return false; // так как ссылки имеют переход по странице, то мы его "отключим"
});
#content_catalog li.active {
  color: green;
}

#slider .slider-news {
  display: none;
}

#slider .slider-news.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="catalog">
  <div id="title_catalog">Каталог</div>
  <div id="content_catalog">
    <ul>
      <li><a href="#" title="Школьная мебель">Школьная мебель</a></li>
      <li><a href="#" title="Гостиные">Гостиные</a></li>
      <li><a href="#" title="Детская мебель">Детская мебель</a></li>
      <li><a href="#" title="Мебель для столовых">Мебель для столовых</a></li>
      <li><a href="#" title="Мебель для гостиниц">Мебель для гостиниц</a></li>
      <li><a href="#" title="Мебель для актовых залов">Мебель для актовых залов</a></li>
      <li><a href="#" title="Офисная мебель">Офисная мебель</a></li>
      <li><a href="#" title="Мягкая мебель">Мягкая мебель</a></li>
      <li><a href="#" title="Мебель для кухни">Мебель для кухни</a></li>
      <li><a href="#" title="Мебель для спальни">Мебель для спальни</a></li>
      <li><a href="#" title="Мебель из массива">Мебель из массива</a></li>
    </ul>
  </div>
</div>
<div id="base">
  <div id="slider">
    <div class="slider-news">
      <a href="#" title="Школьная мебель"><img src="images/Catalog/Uch  mebel/nach_klasy_800_600_1.jpg"></a> </div>
    <div class="slider-news">
      <a href="#" title="Гостиные"><img src="images/Catalog/Other/Adelina/Adelina1 800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Детская мебель"><img src="images/Catalog/Det mebel/detskaja_800x600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для столовых"><img src="images/Catalog/kuhnja/KSMS-04A/KMSS-04-A_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для гостиниц"><img src="images/Catalog/Hotel/sanat_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для актовых залов"><img src="images/Catalog/A_Zal/ik/ik_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Офисная мебель"><img src="images/Catalog/Ofice/NOM-04/nom04_1_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мягкая мебель"><img src="images/Catalog/M_mebel/uglovoj-dlja-kafe/divan_uglovoj_dlja_kafe_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для кухни"><img src="images/Catalog/kuhnja/post3u/post3U_800_600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель для спальни"><img src="images/Catalog/Krovati/Krovat_Valeri/Krovat_Valeri_novinka_800x600.jpg"> </a> </div>
    <div class="slider-news">
      <a href="#" title="Мебель из массива"><img src="images/Catalog/Massiv/tranformer/transformer_sst_800_600.jpg"> </a> </div>
  </div>
</div>

→ Ссылка
Автор решения: Sevastopol'

Вот вариант на чистом JavaScript.

Для примера добавил только первые три и последнюю по списку картинки.

var tabs;
var contents;
tabs = document.querySelectorAll('.item');
contents = document.querySelectorAll('.slider-news');
tabs.forEach(function(elem, i) {
  elem.onmouseover = function() {
    for (let j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove('is-active');
    }
    this.classList.add('is-active');
    for (let j = 0; j < contents.length; j++) {
      contents[j].classList.remove('is-active');
    }
    contents[i].classList.add('is-active');
  }
  elem.onmouseout = function() {
    this.classList.remove('is-active');
    contents[i].classList.remove('is-active');
  }
});
.slider-news {display: none;}
.slider-news.is-active {display: block;}

#base {position: fixed; top: 0; right: 0;}
#base img {width: 200px; height: 200px;}
<div id="catalog">
  <div id="title_catalog">Каталог</div>
  <div id="content_catalog">
    <ul>
      <li class="item"><a href="#" title="Школьная мебель">Школьная мебель</a></li>
      <li class="item"><a href="#" title="Гостиные">Гостиные</a></li>
      <li class="item"><a href="#" title="Детская мебель">Детская мебель</a></li>
      <li class="item"><a href="#" title="Мебель для столовых">Мебель для столовых</a></li>
      <li class="item"><a href="#" title="Мебель для гостиниц">Мебель для гостиниц</a></li>
      <li class="item"><a href="#" title="Мебель для актовых залов">Мебель для актовых залов</a></li>
      <li class="item"><a href="#" title="Офисная мебель">Офисная мебель</a></li>
      <li class="item"><a href="#" title="Мягкая мебель">Мягкая мебель</a></li>
      <li class="item"><a href="#" title="Мебель для кухни">Мебель для кухни</a></li>
      <li class="item"><a href="#" title="Мебель для спальни">Мебель для спальни</a></li>
      <li class="item"><a href="#" title="Мебель из массива">Мебель из массива</a></li>
    </ul>
  </div>
</div>

<div id="base">
  <div id="slider">
    <div class="slider-news">
      <a href="#" title="Школьная мебель"><img src="https://images.pexels.com/photos/1257110/pexels-photo-1257110.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Гостиные"><img src="https://images.pexels.com/photos/1054974/pexels-photo-1054974.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Детская мебель"><img src="https://images.pexels.com/photos/2253879/pexels-photo-2253879.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Мебель для столовых"><img src="images/Catalog/kuhnja/KSMS-04A/KMSS-04-A_800_600.jpg"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Мебель для гостиниц"><img src="images/Catalog/Hotel/sanat_800_600.jpg"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Мебель для актовых залов"><img src="images/Catalog/A_Zal/ik/ik_800_600.jpg"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Офисная мебель"><img src="images/Catalog/Ofice/NOM-04/nom04_1_800_600.jpg"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Мягкая мебель"><img src="images/Catalog/M_mebel/uglovoj-dlja-kafe/divan_uglovoj_dlja_kafe_800_600.jpg"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Мебель для кухни"><img src="images/Catalog/kuhnja/post3u/post3U_800_600.jpg"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Мебель для спальни"><img src="images/Catalog/Krovati/Krovat_Valeri/Krovat_Valeri_novinka_800x600.jpg"></a>
    </div>
    <div class="slider-news">
      <a href="#" title="Мебель из массива"><img src="https://images.pexels.com/photos/50692/brothers-family-siblings-boys-50692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a>
    </div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.