Question

我有一个名为filter.js的Jquery图像滑块插件。请参阅演示here。现在的问题是，最初加载页面时，会显示所有图像。在初始加载时，我只想显示第一个选项卡的/ div图像，当单击下一个div / tab时，将显示其相对图像。然后我添加的是将所有不属于第一个tab / div的图像的可见性设置为隐藏，一旦激活该功能，我将隐藏的可见性恢复为其他选项卡/ divs图像上的可见：

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;和显示：块但是会创建丑陋的过渡... 如何才能在页面加载时显示第一个选项卡的图像而不是所有图像？

请看我的JSFIDDLE

谢谢

Answer 1

这对我来说似乎有些苛刻，但它确实有效：

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

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

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

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

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

在Jquery Image Slider的初始页面加载时隐藏特定图像

2 个答案: