问题描述
嘿,所有,
新手在这里,所以请原谅我的方法和细节。我非常感谢您的帮助!
Hey all,Newbie here, so please forgive my approach and specifics. I'd appreciate some help!
我在一个图片库工作,有三个部分,其中只有一个将一次可见。在页面顶部有三个链接,我要切换其中一个显示,同时隐藏其他两个。
I'm working on an image gallery that's got three sections, of which only one will be visible at a time. At the top of the page there are three links that I want to toggle one of the three sections to show while hiding the other two.
我写的代码是差,只能从链接1到链接2到链接3,但不向后或从链接1到3,3到1等。
The code I've written is poor and works only from Link 1 to Link 2 to Link 3, but not backwards or from link 1 to 3, 3 to 1, etc.
感谢您的帮助和建议!
HTML:
<div id="content">
<h2>PHOTOS</h2>
<hr />
<p align="left"><a id="show_promo">PROMO</a> <a id="show_studio">STUDIO</a> <a id="show_live">LIVE</a></p>
<div id="promo">
<p align="center">PROMO</p>
<p align="center">
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
</p>
<p align="center">
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
</p>
</div>
<div id="studio">
<p align="center">STUDIO</p>
<p align="center">
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
</p>
<p align="center">
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
</p>
</div>
<div id="live">
<p align="center">LIVE</p>
<p align="center">
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
</p>
<p align="center">
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
</p>
</div>
</div>
Javascript:
Javascript:
$('#studio').css('display', 'none');
$('#live').css('display', 'none');
$('#show_studio').click(function(){
$('#promo').fadeOut(600, function(){
$('#studio').fadeIn(600);
});
});
$('#show_live').click(function(){
$('#studio').fadeOut(600, function(){
$('#live').fadeIn(600);
});
});
$('#show_promo').click(function(){
$('#live').fadeOut(600, function(){
$('#promo').fadeIn(600);
});
});
推荐答案
这里的问题是你正在硬编码哪个元素需要淡出。
The problem here is that you are hardcoding which element needs to be faded out. It would be better to select this dynamically.
首先,您应该为 #show -
链接添加一个类和您的 div
。也许 showlink
和节
将是一个好的类名。然后,您可以使用jQuery的 :visible
选择器找到当前可见的 div
。
First, you should add a class to your #show-
links and to your div
s. Perhaps showlink
and section
would be a good class names. You can then use jQuery's :visible
selector to find the currently visible div
.
$('a.showlink').click(function(){
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});
这应该适用于所有链接和 div
s。
This should then work for all your links and div
s.
这篇关于Javascript在三个隐藏的div之间切换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!