[英]Using focus and blur to show and hide a DIV in an unordered list
I am using Fred LeBlancs roundabout plugin and I have incorporated a lightbox to the "active" central image only ( why I "addClass" .active). 我正在使用Fred LeBlancs环形插件 ,我只在一个“活动”中央图像中加入了一个灯箱(为什么我“addClass”.active)。 I also want to show a hidden div with caption text when the image is the active one.
当图像是活动图像时,我还想显示带有标题文本的隐藏div。 I have succeeded with the lightbox but all my captions hide or show when the central image is focused and I of course just need the active one.
我已经成功使用了灯箱,但是当我的中心图像聚焦时,我的所有字幕都隐藏或显示,我当然只需要活动的。 Need a bit of help to show just the one caption.
需要一些帮助才能显示一个标题。
<li><a href="slide.jpg" rel="prettyPhoto" title="Slide">
<img src="slide_thumb.jpg" alt="Slide" /></a>
<div class="caption" style="display:none">Slide Caption</div>
</li>
My code: 我的代码:
$('ul.rbt li').focus(function() {
$('a').addClass('active');
$('.caption').show()
});
$('ul.rbt li').blur(function() {
$('a').removeClass('active');
$('.caption').hide()
});
This should work: 这应该工作:
$('ul.rbt li').focus(function() {
$(this).find('a').addClass('active');
$(this).find('.caption').show()
});
$('ul.rbt li').blur(function() {
$('a').removeClass('active');
$('.caption').hide()
});
You could use this if you are thinking of having the caption shown everytime a user focuses on the image and still having the caption shown even when the image is not focused. 如果您考虑在每次用户关注图像时显示标题,并且即使图像未聚焦时仍显示标题,也可以使用此选项。
$('ul.rbt li').focus(function() {
$('a').addClass('active');
$('.caption').hide()
$('.caption').show()
});
$('ul.rbt li').blur(function() {
$('a').removeClass('active');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.