主页 / 问题 / 1097877
Accepted
Asen123
Asked:2020-03-22 04:04:47 +0000 UTC2020-03-22 04:04:47 +0000 UTC

javascript代码的问题

  • 772
 <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>

我有个问题。我怎样才能做到，当用 1 悬停在 li 上时，显示第一个 ul，当用 2 悬停在 li 上时，显示第二个 ul，等等。我将非常感激。

javascript

3 个回答

  1. 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>

    • 4

  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);
}
    • 2
  3. Best Answer

        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

相关问题