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

Question

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

Answer 1

<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写的不太好，还有其他可以优化的。今天就先到这里

Answer 2

$("li").mouseover(function() {
    $("div").eq($(this).index()).show().siblings().hide();
});

思路：
1.获取当前mouseover的li的索引值
2.让索引值一样的div显示其他的（siblings）隐藏

Answer 3

对li与div做一下对应，比如索引对应，第i个li对应第i个div。

var liIndex=$('li').index();
    $('div').eq(liIndex).show();

当然，也可以是属性上的对应。

Answer 4

不太明白你的意思，或许是跟楼上一个道理 取到li的对应索引，然后用到div的对应索引里
或许你把div都写成li的子元素了 那么只要用jquery里面的hover就好了