嘿所有, 新手在这里,所以请原谅我的方法和具体细节。我很感激一些帮助!
我正在制作一个图像库,它有三个部分,其中一次只能看到一个部分。在页面的顶部有三个链接,我想切换显示的三个部分之一,同时隐藏其他两个部分。
我写的代码很差,只能从Link 1到Link 2到Link 3,但不能向后或从链接1到3,3到1等。
感谢您的帮助和建议!
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:
$('#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);
});
});
答案 0 :(得分:4)
这里的问题是你正在硬编码哪个元素需要淡出。最好动态选择它。
首先,您应该为#show-
链接和div
添加一个类。也许showlink
和section
可能是一个好的类名。然后,您可以使用jQuery的:visible
selector来查找当前可见的div
。
$('a.showlink').click(function(){
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});
这应该适用于您的所有链接和div
s。
答案 1 :(得分:1)
$(function() {
$("#content p a").click(function() {
var selector = this.id.substring(this.id.indexOf("_") + 1);
$("#" + selector).fadeIn().siblings("div").fadeOut();
});
});
答案 2 :(得分:1)
这是一种通用的方式。分组和识别代表画廊的所有div是很重要的。然后,您需要找到一种方法来通知链接他们必须显示的图库:
HTML:
<div id="content">
<h2>PHOTOS</h2>
<hr />
<p align="left" id="links">
<a id="show_promo" gallery="promo">PROMO</a>
<a id="show_studio" gallery="studio">STUDIO</a>
<a id="show_live" gallery="live">LIVE</a>
</p>
<div id="galleries">
<div id="promo" class="gallery">
<p align="center">PROMO</p>
<p align="center">
<img src="#" />
</p>
</div>
<div id="studio" class="gallery">
<p align="center">STUDIO</p>
<p align="center">
<img src="#" />
</p>
</div>
<div id="live" class="gallery">
<p align="center">LIVE</p>
<p align="center">
<img src="#" />
</p>
</div>
</div>
</div>
JS:
$("#links a").click(function() { // for every link in #links
$("#galleries .gallery:not(#" + $(this).attr("gallery") + ".gallery)").slideUp(); // hide ALL galleries
$("#galleries #" + $(this).attr("gallery") + ".gallery").slideDown() // show the gallery associated to this link
});
祝你好运!
答案 3 :(得分:1)
关于jsfiddle的工作示例:http://jsfiddle.net/Damien_at_SF/umcG2/
当点击任何一个anchers时,这将读取HTML并将其用作要显示的新div的ID。当前div有一个名为current
的类,一旦淡入淡出效果完成,它就会被换出。这样,您就可以使用$('.current')
来解决淡出问题,并且可以使用$('#'+id)
来解决您想要淡出的div ...
希望这会有所帮助:)
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" class="current">
<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>
JS:
$('p a').click(function(){
var id = $(this).html().toLowerCase();
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});
CSS:
#studio {
display:none;
}
#live {
display:none;
}
答案 4 :(得分:0)
请记住,对于你的每一个div,你都需要淡出其他人的 。因此,为了清晰起见,在伪代码中,您需要类似
的内容 $('#show_live").click(function(){
// fade out "studio"
// fade out "promo"
// fade IN "live"
});
我相信有一种方法可以让jQuery同时淡化两个div,但我不记得它。
答案 5 :(得分:0)
更好的方法是使用泛型类,因此您不必单独处理每个容器,并且可以添加新容器,而不会在以后重写代码。
答案 6 :(得分:0)
我通常为这样的东西做的是隐藏所有容器,然后将它们附加到包含可见内容的显示div。
<a href="#" rel="one" class="view-port-trigger">Panel One</a>
<a href="#" rel="two" class="view-port-trigger">Panel Two</a>
<a href="#" rel="three" class="view-port-trigger">Panel Three</a>
<div class="gallery-pane" id="one"><h1>panel one</h1></div>
<div class="gallery-pane" id="two"><h1>Panel Two</h1></div>
<div class="gallery-pane" id="three"><h1>Panel Three</h1></div>
<div class="gallery-view-port"></div>
var $viewPort = $(".gallery-view-port"),
curSelection;
$(".gallery-pane").css('display', 'none');
$(".view-port-trigger").bind('click', function(index, el){
if(curSelection !== $(this).attr('rel')){
curSelection = $(this).attr('rel');
markupToInject = $("#" + curSelection);
$viewPort.children()
.fadeTo(500, 0)
.delay(500)
.queue(function(n){
//append the cloned selection in a queue
$viewPort.append(markupToInject.clone())
})
.fadeTo(500, 1);
}
});
你可能不得不吝啬实际的追加和淡化,但理论上它应该有效。
-Cheers!