javascript - 显示/隐藏 Div

Question

在拼凑了几个问题之后，我已经成功地走到了显示/隐藏 div 的地步:

$(document).ready(function(){
 $('.box').hide();
  $('#categories').onMouseOver(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
 });
});

HTML:

<div id="categories">
 <div id="btn-top20"><a href="">Top 20 Villas</a></div>
 <div id="btn-villaspec"><a href="">Villa Specials</a></div>
 <div id="btn-staffpicks"><a href="">Our Staff Picks</a></div>
</div>

<div id="category-content">
 <div id="divarea1" class="box">
  Content 1
 </div>

 <div id="divarea2" class="box">
  Content 2
 </div>

 <div id="divarea3" class="box">
  Content 3
 </div>    
</div>

我错过了什么？

Answer 1

这会起作用:

 <div id="btn-top20" rel="area1"><a href="">Top 20 Villas</a></div>
 <div id="btn-villaspec" rel="area2"><a href="">Villa Specials</a></div>
 <div id="btn-staffpicks" rel="area3"><a href="">Our Staff Picks</a></div>

使用此代码:

$(document).ready(function(){
    $('.box').hide();
    $('#categories div').mouseenter(function() {
       $('.box').hide();
       $('#div' + $(this).attr('rel')).show();
    });
});

更正:

• MouseHover 上没有这样的功能。
• 将事件附加到每个 div，而不是 #categories 父级，因此 this 具有正确的上下文。
• 为每个 div 添加了 rel，因为 val 没有意义。

工作示例:http://jsbin.com/ivuxo

您可能还想在鼠标移出时隐藏 div，在这种情况下您可以使用 hover:

$('#categories div').hover(
   function() { //hover in
      $('.box').hide();
      $('#div' + $(this).attr('rel')).show();
   }, function(){ //out
      $('.box').hide();
   });