1

好的，所以我正在使用 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，#cgdiv 应该隐藏而#badiv 会显示。我不确定我是否有道理，所以如果我没有，请发表评论，我会进一步阐明。

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

4

2 回答 2

0

像这样为你的锚添加一个通用的标识符；

<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);
});

请记住，下次使用类可以让您同时定位多个元素。

于 2013-03-11T03:53:32.360 回答
0

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

$('#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 fiddle。您不必使用 href 属性为每个按钮手动添加事件。

http://jsfiddle.net/EbGCx/

于 2013-03-11T03:53:40.873 回答