顯示/隱藏的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); 
});