Проблемы с javascript кодом

Question

 <ul id="spisok">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul> 

 <ul class="ul_rut">
<li></li>
</ul> 

 <ul class="ul_rut">
<li></li>
</ul> 

 <ul class="ul_rut">
<li></li>
</ul>

У меня вопрос. Как сделать так, чтобы при наведении на li с 1, выводился первый ul, при наведении на li с 2, выводилось второй ul и т. д. Буду очень благодарен.

Answer 1

JS:

document.getElementById('spisok').addEventListener('mouseover', e => {
    let num = e.target.getAttribute('id')*1;      
    vivodisDavay([...document.querySelectorAll('ul')][num]);
})

function vivodisDavay(el){
    console.log(el);
}

Answer 2

    window.onload = function () { // При загрузке документа
        let uls = document.getElementsByClassName('ul_rut'); // Получаем все элементы с классом
        for (let i=0;i<uls.length;i++){
            uls[i].style.display = 'none'; // Скрываем их (Можно скрывать через класс со свойством display)
        }
        let spisok = document.getElementById('spisok'); // Находим элемент с классом spisok (в котором наши активные li)
        let li = spisok.getElementsByTagName('li'); // Из этой выборки получаем элементы li(чтобы другие не отслеживать li

        for(let i1=0;i1<li.length;i1++){ // Перебираем элементы
            li[i1].addEventListener('mouseover', function () { // Если нажата кнопка то...
                for (let i2 = 0; i2 < uls.length; i2++) {
                    if(i1 == i2){ // Если порядковый номер наведенной li совпадает с порядковым номером li с классом ul_rut
                        uls[i2].style.display = 'block'; // Этот блок показываем
                    } else {
                        uls[i2].style.display = 'none'; // Остальные скрываем.
                    }
                }
            });
        }
    }

<ul id="spisok">
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
</ul>

<ul class="ul_rut">
    <li>1</li>
</ul>

<ul class="ul_rut">
    <li>2</li>
</ul>

<ul class="ul_rut">
    <li>3</li>
</ul>

Answer 3

var uls = [...document.querySelectorAll(".ul_rut")];
uls.forEach(el => el.style.display = "none");

var lis = [...document.querySelectorAll("#spisok li")];
lis.forEach(el => {
  el.addEventListener("mouseover", function(e) {
    uls.forEach(el => el.style.display = "none");
    uls[lis.indexOf(this)].style.display = "block";
  });
});

<ul id="spisok">
  <li> 111 </li>
  <li> 222 </li>
  <li> 333 </li>
</ul>

<ul class="ul_rut">
  <li>AAA</li>
</ul>

<ul class="ul_rut">
  <li>BBB</li>
</ul>

<ul class="ul_rut">
  <li>CCC</li>
</ul>

БЛОГ НА HUSL

Проблемы с javascript кодом

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