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>