3

我有一个名为 filter.js 的 Jquery 图像滑块插件。在此处查看演示。现在的问题是，最初加载页面时，所有图像都会显示。在初始加载时，我只想显示第一个选项卡/div 的图像，当单击下一个 div/选项卡时，将显示其相关图像。然后我添加的是将不属于第一个选项卡/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 but tha 创建丑陋的过渡......我怎样才能在页面加载时只显示第一个选项卡的图像而不是全部？

请看我的JSFIDDLE

谢谢

4

2 回答 2

3

这对我来说似乎有点 hacky，但它有效：

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

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

顺便说一句，我从 css 中取出了最后一部分。

于 2012-08-15T19:35:12.033 回答
2

试试这个：

JS：

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

​</p>

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..

小提琴：http: //jsfiddle.net/YapAU/19/

于 2012-08-15T19:19:30.593 回答