jquery index() – 悬停列表项,显示具有相同索引的内容

我有一个小菜单的 jquery问题.我有一个菜单项列表.当我将鼠标悬停在其中一个列表项上时,我想显示与列表项共享相同索引的div列表中的内容.这需要是动态的,允许任意数量的菜单项和内容项.

$(document).ready(function() {
    $("#leftnav li").each(function(){
        $(this).mouSEOver(function() {
            //SHOW div that shares same index as this li
        });
        $(this).mouSEOut(function() {
            //HIDE div that shares same index as this li
        });
    });
});

<ul id="leftnav">
    <li>Link 1</li>
    <li>Link 2</li>
</ul>

<div id="content">
    <div>Content 1</div>
    <div>Content 2</div>
</div>

解决方法

我可能会使用 hover()方法来简化这个(或 hoverIntent插件,它解决了一些其他问题,如快速鼠标移动的问题).

$(function() {
     $('#leftnav li').hover(
          function() {
               var idx = $('#leftnav li').index(this);
               $('#content div').eq(idx).show();
          },function() {
               var idx = $('#leftnav li').index(this);
               $('#content div').eq(idx).hide();
          }
      }):
});

原文地址：https://www.jb51.cc/jquery/176852.html