使用jQuery实现悬停显示对应div，需默认展示首个div求解决方案

嘿，这个需求很容易实现，我帮你调整一下代码就行～

首先注意一个小问题：你的jQuery引用放在了自定义脚本之后，这会导致页面加载时找不到$对象直接报错，所以得把jQuery的<script>标签放在最前面。

然后，要实现页面加载后默认显示第一个<div>，只需要在初始化的hideContentDivs()调用之后，主动让第一个.main div显示出来就好啦。

修改后的完整代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function hideContentDivs(){ 
  $('.main div').each(function(){ 
    $(this).hide();
  }); 
} 

// 初始化：先隐藏所有div，再显示第一个
hideContentDivs();
$('.main div').eq(0).show();

$('#menu a').hover(function(e){ 
  hideContentDivs(); 
  var tmp_div = $(this).parent().index(); 
  $('.main div').eq(tmp_div).show(); 
}); 
</script>

简单解释一下：

• eq(0)用来选中jQuery集合里的第一个元素（因为索引是从0开始的）
• 我们先执行hideContentDivs()把所有内容div隐藏，再单独让第一个显示，这样就完美满足你的需求啦～

内容的提问来源于stack exchange，提问作者Husna