javascript - jQuery怎么实现鼠标移入第i个li则对应显示第i个div

问题描述

问 题

如题 想要鼠标移入第i个li的时候 对应的第几个div显示出来

解决方案

<div id="wrapper">
  <!-- 这里是li-->
   <ul id="nav-li">
      <li>1</li>
      <li>2</li>
      <li>3</li>
   </ul>
  <!-- 这里是对应的div-->
   <div id="content-wrpper">
      <div>1内容</div>
      <div>2内容</div>
      <div>3内容</div>
   </div>
</div>

js代码

window.onload = function(){
            var navLi = document.getElementById("nav-li");
            var navLiList = navLi.getElementsByTagName("li");
            var contentDiv = document.getElementById("content-wrpper");
            var contentDivList = contentDiv.getElementsByTagName("div");
            var index;

            for(var i=0; i<navLiList.length; i++){
                 navLiList[i].index = i;
                }
        //采用事件代理
        navLi.addEventListener("mouseover",function(e){

           if(e.target.nodeName.toLowerCase() === "li"){
               //添加index索引
                  for(var j=0; j< contentDivList.length; j++){
                          contentDivList[j].style.display = "none";
                   }

              contentDivList[e.target.index].style.display = "block";
            }
         
        },false);

    }

js写的不太好，还有其他可以优化的。今天就先到这里

这篇关于javascript - jQuery怎么实现鼠标移入第i个li则对应显示第i个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！