0

a、b、c、dの4つのボックスがあり、ユーザーがボックスaを選択した場合、次のことを行います。

画像を選択してコンテンツをロードする 1

画像を選択 b コンテンツをロード 2

画像を選択 c コンテンツをロード 3

画像を選択してコンテンツをロードする 4

ラジオボタンがクリックされるまで、ロードされる可能性のあるすべてのコンテンツを非表示にしたい。これまでのところ、すべて非表示になっていますが、ラジオ ボタンをクリックしてもコンテンツはロードされません。

ありがとう！

<div id="framework">
    <div class="element">
        <img style="float:left;" src="img/left.png" />
        <img style="padding-left:25px; float:left;" src="img/right.png" />
        <img style="padding-left:25px; float:left;" src="img/both.png" />
        <img style="padding-left:25px; float:left;" src="img/without.png" />
    </div>
    <form class="actions">
        <div style="clearfix:none;" class="confirm">
            <input type="radio" id="frame_left" name="framework">
        </div>
        <div style="clearfix:none;" class="confirma">
            <input type="radio" id="frame_right" name="framework">
        </div>
        <div style="clearfix:none;" class="confirmb">
            <input type="radio" id="frame_both" name="framework">
        </div>
        <div style="clearfix:none;" class="confirmc">
            <input type="radio" id="frame_without" name="framework">
        </div>
    </form>
</div>
<script>
    $(document).ready(function() {
        // do your checks of the radio buttons here and show/hide what you want to
        $("#navLeft").hide();
        $("#navRight").hide();
        if ($("#frame_left:checked").length > 0) {
            $("#navLeft").hide();
        }

        // add functionality for the onclicks here
        $("#frame_left").click(function() {
            $("#navleft").show();
        });

        $("#frame_right").click(function() {
            $("#navRight").hide();
        });
    });
</script>
<img id="navLeft" src="img/left.png" />
<img id="navRight" src="img/right.png" />
</div>
4

2 に答える 2

1

navLeft（キャメルケースを使用）はDIVのIDですがnavleft、スクリプトで（キャメルケースを使用せずに）使用しています。

あなたは隠れていて、JSnavRightをクリックすると再び隠れますか? それは論理的ではありませんか？frame_rightnavRight

于 2013-03-27T20:45:37.310 に答える
0

これを switch ステートメントで行い、デフォルトでコンテンツ要素を css で非表示にします。 実用的なフィドル。の意味がわかりませんでしたframe_without。今のように、何も表示しないだけかもしれません。

$(document).ready(function(){
$('input[name="framework"]').change(function() {
    $('#navLeft, #navRight').hide();

    switch($('input[name="framework"]:checked').attr('id')) {
        case "frame_left":
           $("#navLeft").show();
            break;
        case "frame_right":
            $("#navRight").show();
            break;
        case "frame_both":
           $("#navLeft, #navRight").show();
            break;
         case "frame_without":
            //Dont know what here should happen
            break;
    }
});
});

コンテンツを非表示にする css:

#navLeft, #navRight {
    display: none;
}
于 2013-03-27T20:55:13.880 に答える