1
 <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 и т. д. Буду очень благодарен.

4
  • Куда ul должны выводиться?
    – Leonid
    21 мар 2020 в 20:06
  • у ul изначально display:none, нужно, чтобы был display:block
    – Asen123
    21 мар 2020 в 20:09
  • пытался обернуть всё в один блок и как-то через this, но не смог
    – Asen123
    21 мар 2020 в 20:13
  • @Asen123 Добавил в изменённом формате. Не увидел, что заменили вопрос.
    – Denis640Kb
    21 мар 2020 в 20:58

3 ответа 3

4

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>

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>

2

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);
}
4
  • Ну с функцией справишься, пока пусть в консоль выводит
    – Leonid
    21 мар 2020 в 20:18
  • Уже и задание поменял. Сейчас.
    – Leonid
    21 мар 2020 в 20:19
  • Я так понимаю, что эта функция просто выводит в консоль id="spisokspisok", немного не понимаю как она может помочь. Если вам не трудно, не могли бы объяснить.
    – Asen123
    21 мар 2020 в 20:54
  • Функция получает целевой элемент, этого достаточно, дальше сам.
    – Leonid
    22 мар 2020 в 7:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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