1

さて、スケルトン グリッド システムを使用して単純な Web サイトを設計しています。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;
}

だから私がやりたいのは、画像の1つをクリックすると、非表示の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

1 つの解決策は、要素の表示を処理する関数を作成することです。すべてのクリックイベントは、この関数を次のように参照します

$('#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();
}

これが基本的な例です。また、パラメーターなしで関数を呼び出す開始 bu ですべての要素を非表示にすることもできます。例: showElement()。また、クラスを JS でアニメーション化する代わりに、クラスを追加および削除してフェードに css3 を使用することもお勧めします。

編集:より高速なアプローチで JS フィドルをすばやく作成しました。href 属性を使用して、ボタンごとに手動でイベントを追加する必要はありません。

http://jsfiddle.net/EbGCx/

于 2013-03-11T03:53:40.873 に答える