Jquery 图片轮播：在页面初始加载时隐藏特定图片

Question

我有一个名为filter.js的Jquery图像滑块插件。请查看演示此处。现在的问题是，当页面最初加载时，所有图像都会显示。在初始加载时，我只想显示第一个选项卡/ div 的图像，并且在单击下一个div/tab时，其相关图像将显示。然后我添加了设置所有不属于第一个选项卡/ div 的图像的可见性为隐藏，一旦激活该函数，我就将其他选项卡/ div 的图像的隐藏可见性恢复为可见性：

CSS:

.tancan{  /*Note: tancan is the class of the second div I initially want to hide*/
    visibility: hidden;
}​

JS：

$(function(){
        $('.filters.demo1').filters();
        $('.tancan').style.visibility = "visible";
    });​

我的问题：这样做不起作用，一旦我将可见性设置为隐藏，就会出现问题。

$('.tancan').style.visibility = "visible";

命令无效-图像仍然隐藏。我尝试使用display: none;和display: block，但那会创建丑陋的过渡...如何在页面加载时仅显示第一个选项卡的图像而不是所有图像？

请查看我的JSFIDDLE

谢谢

- DextrousDave

Answer 1

这对我来说似乎有些不专业，但它可以工作：

$('.filters.demo1').filters();
$('a[rel=koebana]').click();

http://jsfiddle.net/YapAU/21/

顺便说一句，我把CSS的最后一部分删掉了。

- egbrad

---

谢谢，它运行得非常好，除了一开始应该隐藏的图像的瞥见，但这是可以接受的...谢谢。 - DextrousDave

有趣。对我来说它没有暂时显示；我猜我的JavaScript只是很快或者什么的。如果你添加一个新类，其中包含 display:none 到 tancan li，然后在“点击” koebana 链接后删除该类，会怎样呢？像这样：http://jsfiddle.net/YapAU/22/ - egbrad

很好的想法，但出于某种原因，在我的网站上它不起作用...点击任何东西都不起作用...只在fiddle中起作用... - DextrousDave

你也在 CSS 文件中做了更改吗？我从你原始的 fiddle 中去掉了 visibility:hidden 这一部分。 - egbrad

太棒了。非常感谢，它在所有浏览器中都有效。你真的很有帮助。 - DextrousDave

Answer 2

请尝试以下代码：

JS：

$(function(){
    $('.filters.demo1').filters();
    $("#tancan").click(function(){             
    $(".tancan").css("visibility", "visible");
    });            
});

​

HTML:

<div id="content">
    <div class="galleryTitle">Photo Gallery</div>    
    <div class="filters demo1">
        <div class="filter">
            <a href="#" rel="koebana">Koebana Spray Tan</a>
            <a href="#" rel="tancan" id="tancan">Vertical Sunbed (TanCan)</a>
        </div>
etc..

Fiddle: http://jsfiddle.net/YapAU/19/

- David Passmore

---

谢谢您的回答。它可以工作，但在Firefox中不起作用...它仍然在加载时显示所有图像...有什么建议吗？ - DextrousDave

好的，现在它可以工作了，在FF中清除了我的历史记录...我之所以更喜欢idor_brad的代码，是因为他最初隐藏图像并转到下一个选项卡的过渡效果比你的好看...只是个人偏好...但非常感谢你，我给你投了赞... - DextrousDave