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

前端之家收集整理的这篇文章主要介绍了jquery index() – 悬停列表项,显示具有相同索引的内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个小菜单jquery问题.我有一个菜单项列表.当我将鼠标悬停在其中一个列表项上时,我想显示与列表项共享相同索引的div列表中的内容.这需要是动态的,允许任意数量菜单项和内容项.
  1. $(document).ready(function() {
  2. $("#leftnav li").each(function(){
  3. $(this).mouSEOver(function() {
  4. //SHOW div that shares same index as this li
  5. });
  6. $(this).mouSEOut(function() {
  7. //HIDE div that shares same index as this li
  8. });
  9. });
  10. });
  11.  
  12. <ul id="leftnav">
  13. <li>Link 1</li>
  14. <li>Link 2</li>
  15. </ul>
  16.  
  17. <div id="content">
  18. <div>Content 1</div>
  19. <div>Content 2</div>
  20. </div>

解决方法

我可能会使用 hover()方法来简化这个(或 hoverIntent插件,它解决了一些其他问题,如快速鼠标移动的问题).
  1. $(function() {
  2. $('#leftnav li').hover(
  3. function() {
  4. var idx = $('#leftnav li').index(this);
  5. $('#content div').eq(idx).show();
  6. },function() {
  7. var idx = $('#leftnav li').index(this);
  8. $('#content div').eq(idx).hide();
  9. }
  10. }):
  11. });

猜你在找的jQuery相关文章