次のスクリプトを使用して、コンテンツを切り替えたり、ラジオ ボタンをクリックしてコンテンツを表示および非表示にしたりします。
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
次の css を使用しないと、すべてのオプションがクリックされるまで表示されます。
.newboxes {
display: none;
}
ラジオボタンに使用する HTML は次のとおりです。
<input style="vertical-align: middle; margin-top: 4px;" onclick="javascript:showonlyone('newboxes1');" type="radio" name="ProgramChoice" value="Lorem Ipsum" >
これは、上記の情報が表示および非表示にするために呼び出す情報です。
<div class="newboxes" id="newboxes1"> Lorem Ipsum </div>
CSS を使用すると、ページの読み込み時に何も表示されなくなりますが、CSS がないとすべてが表示されます。ページの読み込み時に最初のオプションを表示する方法を知っている人はいますか?