显示/隐藏的div
几个问题拼凑之后,我已经成功地得到这个远来显示/隐藏的div:显示/隐藏的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();
});
});
更正:
- 没有这样的功能onMouseHover。
- 将活动附加到每个div,而不是
#categories
父级,因此this
具有正确的上下文。 - 为每个格添加了
rel
,因为val
没有意义。
你也可以隐藏在鼠标移出div中,至极情况下,你可以使用hover
:
$('#categories div').hover(
function() { //hover in
$('.box').hide();
$('#div' + $(this).attr('rel')).show();
}, function(){ //out
$('.box').hide();
});
这完美谢谢!我仍然只是将它们混合在一起,但我开始明白是什么。感谢帮助。 – Rob 2010-03-23 17:20:08
我知道这已经有一个体面的答案虽然这不是jQuery/mooTools - 我觉得值得一提:
七种方式来隐藏一个元素的Javascript: http://www.dustindiaz.com/seven-togglers/
:)
的onMouseOver是不是一个有效的jQuery的方法,等等。
我真的建议使用谷歌浏览器浏览当你正在调试javascript,它的错误控制台是非常有用的,不仅仅是这样的错误,而且还指出了脚本中抛出错误的位置可能比firefox中的Firebug更有优势。
(甚至同时使用铬,作为萤火虫精简版网站会告诉你总是可以运行Firebug的精简版,以及通过书签:http://getfirebug.com/firebuglite)(!和未经测试)
灵活,通用的解决方案,它与任意数量的工作的“标签”元素组。您只需指定“.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>
对于使用ul/li而不是嵌套div,他可能会更好地向这个方向移动。 – Kzqai 2010-03-23 15:08:22
我用这个切换我的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);
});
呃,怎么这么“我错过了什么”?怎么了?不会发生什么? – BalusC 2010-03-23 14:43:29
什么不起作用? – matpol 2010-03-23 14:44:47
你缺少的一件事就是'#categories'是一个'div',并且没有任何'val()'。另一个是该函数被称为'mouseover'而不是'onMouseOver'。除此之外,你还没有指定你想要发生的事情。当'#categories'被徘徊时,你想显示什么?我认为你期望'$(this).val()'是'area1','area2'或'area3',但是解决这些问题的魔法逻辑是什么? – 2010-03-23 14:46:09