在拼凑了几个问题之后,我已经成功地显示/隐藏了 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>
我错过了什么?
最佳答案
这会起作用:
<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
没有意义。
您可能还想在鼠标移出时隐藏 div,在这种情况下您可以使用 hover
:
$('#categories div').hover(
function() { //hover in
$('.box').hide();
$('#div' + $(this).attr('rel')).show();
}, function(){ //out
$('.box').hide();
});
关于javascript - 显示/隐藏 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2500743/