显示/隐藏的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(); 
    }); 
}); 

更正：

• 没有这样的功能onMouseHover。
• 将活动附加到每个div，而不是#categories父级，因此this具有正确的上下文。
• 为每个格添加了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(); 
    }); 

Answer 2

我知道这已经有一个体面的答案虽然这不是jQuery/mooTools - 我觉得值得一提：

七种方式来隐藏一个元素的Javascript： http://www.dustindiaz.com/seven-togglers/

:)

Answer 3

的onMouseOver是不是一个有效的jQuery的方法，等等。

我真的建议使用谷歌浏览器浏览当你正在调试javascript，它的错误控制台是非常有用的，不仅仅是这样的错误，而且还指出了脚本中抛出错误的位置可能比firefox中的Firebug更有优势。

（甚至同时使用铬，作为萤火虫精简版网站会告诉你总是可以运行Firebug的精简版，以及通过书签：http://getfirebug.com/firebuglite）（！和未经测试）

Answer 4

灵活，通用的解决方案，它与任意数量的工作的“标签”元素组。您只需指定“.tab-handles a [href =＃id_of_target_tab]”层次结构即可。作为奖励，所选标签在页面加载之间被记住。

$(function() { // Shortcut for $(document).ready() 

    $('.tab-handles a').mouseenter(function() { 
     // Trigger custom event 'hide' for sibling handles. 
     $(this).siblings().trigger('hide'); 
     // Show current tab. 
     $($(this).attr('href')).show(); 
    }).bind('hide', function() { 
     // Hide the corresponding tab on custom event 'hide'. 
     $($(this).attr('href')).hide(); 
    }).each(function() { 
     // Show tab if its id is found in url as an anchor (or hash). 
     if (new RegExp($(this).attr('href') + '$')).test(window.location.href)) 
      $(this).trigger('mouseenter'); 
    }); 

}) 

你的页面可以包含任意数量的下列结构：

<ul class="tab-handles"> 
    <li><a href="#top-villas"></a></li> 
    <li><a href="#villa-specials"></a></li> 
</ul> 

<div> 
    <div id="top-villas"> Your tab content goes here. </div> 
    <div id="villa-specials"> ... </div> 
</div> 

Answer 5

我用这个切换我的div：

HTML

<div class="content-item-news">..</div> 
<div class="content-news-extra">...</div> 

jQuery的

$(".content-item-news").click(function() { 
    $(this).next(".content-news-extra").slideToggle(100); 
});