Question

好的，所以我正在使用Skeleton网格系统设计一个简单的网站。这是HTML代码：

<div id="gallery" class="nine columns">
    <div id="thumb1" class="three columns">
        <a id="cglink" href="#">
            <img src="images/cg1.jpg">
        </a>
    </div>
    <div id="thumb2" class="three columns">
        <a id="balink" href="#">
            <img src="images/ba1.jpg">
        </a>
    </div>
    <div id="thumb3" class="three columns">
        <a id="l7link" href="#">
            <img src="images/l71.jpg">
        </a>
    </div>
</div>

CSS：

#gallery {
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin: 0;
}

#gallery .three.columns {
    padding: 19.3px 0 13.5px 0;
}

#thumb1 {
    margin-left: 0;
}

#thumb2 {
    margin: 0 10px 0 10px;
}

#thumb3 {
    margin-right: 0;
}

.three.columns img {
    width: 100%;
    opacity: 1;
    -webkit-transition: opacity .5s ease-in;
}

.three.columns img:hover {
    opacity: .7;
}

所以我想要做的是当我点击其中一个图像时，它会切换一个隐藏的div。 html就在这里：

<div id="cg" class="nine columns">
    <img src="images/cg1.jpg">
</div>
<div id="ba" class="nine columns">
    <img src="images/ba1.jpg">
</div>
<div id="l7" class="nine columns">
    <img src="images/l71.jpg">
</div>

所以我目前应用了基本的切换脚本。

$('#cg, #ba, #l7').hide();
$('#cglink').click(function () {
    $('#cg').toggle('fade', 400);
});
$('#balink').click(function () {
    $('#ba').toggle('fade', 400);
});
$('#l7link').click(function () {
    $('#l7').toggle('fade', 400);
});

所以我目前的工作原理。但是我发现了这个错误，如果我切换#cg，然后尝试切换#ba，#ba将显示在下面。它不是那么漂亮。所以我想要做的是：当我点击#cglink然后决定点击#balink时，#cg div应该隐藏，#ba div会显示。我不确定我是否有意义，所以如果我没有，只需评论，我会进一步说清楚。

我认为人们设置标志以检查另一个div是否已经打开以便它可以隐藏。但是我还是初学者，所以我需要帮助。

Answer 1

为您的主播添加一个通用的标识符，如此;

<div id="gallery" class="nine columns">
    <div id="thumb1" class="three columns">
        <a href="#" id="cglink" class="toggle_btn"><img src="images/cg1.jpg"></a>
    </div>
    <div id="thumb2" class="three columns">
        <a href="#" id="balink" class="toggle_btn"><img src="images/ba1.jpg"></a>
    </div>
    <div id="thumb3" class="three columns">
        <a href="#" id="l7link" class="toggle_btn"><img src="images/l71.jpg"></a>
    </div>
</div>

然后转到您正在切换的元素：

<div id="cg" class="nine columns toggle_img">
    <img src="images/cg1.jpg">
</div>
<div id="ba" class="nine columns toggle_img">
    <img src="images/ba1.jpg">
</div>
<div id="l7" class="nine columns toggle_img">
    <img src="images/l71.jpg">
</div>

然后切换：

$('#cg, #ba, #l7').hide();

$('a.toggle_btn').on('click', function () {
    var elem = $('#' + this.id.replace('link',''));

    $('.toggle_img').not(elem).fadeOut(400);
    elem.toggle('fade', 400);
});

请记住，下次使用类会让你同时定位多个元素。

Answer 2

一种解决方案是创建一个函数来处理元素的显示。您的所有点击事件都会像这样引用此功能

$('#cglink').click(function() {showElement('#cg'));
$('#balink').click(function() {showElement('#ba')});
$('#l7link').click(function() {showElement('#l7')});

你的showElement函数可以确保隐藏所有元素，并且只在必要的元素中淡入。

function showElement(whichElement) {
    $("#gallery div").stop().hide() //hide all elements. we call stop() to stop any fading
    $(whichElement).fadeIn();
}

这是基本的例子。你也可以在开始时隐藏调用函数的所有元素，没有参数。例如：showElement（）。我还建议您通过添加和删除类而不是通过JS动画来使用css3进行淡入淡出。

编辑：我用一种更快的方法快速创建了一个JS小提琴。您不必使用href属性为每个按钮手动添加事件。

http://jsfiddle.net/EbGCx/

在图像集之间切换？

2 个答案: