- ベストアンサー
ランダム表示とクリックで表示切替
- コンテンツの内容には、3つのカテゴリーがあり、カテゴリーごとに表示内容が違います。ボタン１～３でカテゴリーの切り替えをしたいという要望があります。
- 実装したい機能は、毎回読み込み毎に、ランダムでカテゴリーを切り替えて表示したいのですが、それと同時に、ボタン１～３で、カテゴリーの切り替えをしたいというものです。
- 現在の実装ではカテゴリーの切り替えとボタンのクリック処理がうまく行かないため、改善案を求めています。
- F0X
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
案1 フレームを使い、htmlを呼び出す（私のやったのと同じ方法） 案2 フレームに対して、 top.フレーム名.document.writeln("ソース"); として書き込む。 案3 document.getElementById('divのid').innerHTML="ソース"; を使う。divタグなどに動的に書き込める。 リロードは必要ないが、onload後に書き込む必要がある。 <div id="hoge"></div>なら document.getElementById('hoge').innerHTML="ソース"; 案4 DOMを使う。 参考URLを見るとよいかも知れません。 案5 <div style="display:none" id="hoge"> <!--内容--> </div> としておき、 document.getElementById('hoge').display="block"; と document.getElementById('hoge').display="none"; で表示/非表示を切り替える。 メリット・デメリット 案1・2 ほぼどの環境でも動作。ただし、フレームに非対応のときどうするのかを除けば簡単かつ、使える方法。 案3 最近のIE/FireFoxやその他のブラウザで動くが、最近のものでも働かないものがあり、古いブラウザでも動かない。それほど難しくはない。 案4 詳しくないのでなんとも言えませんが、難しい。 案5 これが一番ベターかと思います。 といった感じです。 閲覧の対象と目的で選んでください。 ただし、書き出している内容が、タグを使用するものではなく、 単なる文章などの場合、textareaなどに書き込むほうが早いです。 これ以降に案5を使った場合を示します。 参考になれば幸いです。 <html> <head> <script type="text/javascript"> <!-- function ch(c_id,mode){ if(mode==1||document.getElementById(c_id).style.display=="block"){ document.getElementById(c_id).style.display="none"; } else{ document.getElementById(c_id).style.display="block"; } } function sw(a,b){ if(a==1){ ch('c1_1',1); ch('c1_2',1); ch('c1_3',1); } else{ ch('c2_1',1); ch('c2_2',1); ch('c2_3',1); } ch('c'+a+'_'+b,0) } function rand(){ ch("c1_"+(Math.floor(Math.random()*3)+1),0); ch("c2_"+(Math.floor(Math.random()*3)+1),0); } //--> </script> </head> <body> <script type="text/javascript"> <!-- var b1_1='<input type="button" value="カテゴリー1_1" onclick="sw(1,1)">'; var b1_2='<input type="button" value="カテゴリー1_2" onclick="sw(1,2)">'; var b1_3='<input type="button" value="カテゴリー1_3" onclick="sw(1,3)"><br>'; var b2_1='<input type="button" value="カテゴリー2_1" onclick="sw(2,1)">'; var b2_2='<input type="button" value="カテゴリー2_2" onclick="sw(2,2)">'; var b2_3='<input type="button" value="カテゴリー2_3" onclick="sw(2,3)"><br>'; var val1_1='<div id="c1_1" style="display:none">カテゴリー1の内容:カテゴリー1_1が表示されています。</div>'; var val1_2='<div id="c1_2" style="display:none">カテゴリー1の内容:カテゴリー1_2が表示されています。</div>'; var val1_3='<div id="c1_3" style="display:none">カテゴリー1の内容:カテゴリー1_3が表示されています。</div>'; var val2_1='<div id="c2_1" style="display:none">カテゴリー2の内容:カテゴリー2_1が表示されています。</div>'; var val2_2='<div id="c2_2" style="display:none">カテゴリー2の内容:カテゴリー2_2が表示されています。</div>'; var val2_3='<div id="c2_3" style="display:none">カテゴリー2の内容:カテゴリー2_3が表示されています。</div>'; document.write(b1_1+b1_2+b1_3+val1_1+val1_2+val1_3+b2_1+b2_2+b2_3+val2_1+val2_2+val2_3); rand(); //--> </script> <noscript> <a href="c1.html" target="ifra">カテゴリー1-1</a> <a href="c1.html" target="ifra">カテゴリー1-2</a> <a href="c2.html" target="ifra">カテゴリー1-3</a><br> <a href="c1.html" target="ifra">カテゴリー2-1</a> <a href="c1.html" target="ifra">カテゴリー2-2</a> <a href="c2.html" target="ifra">カテゴリー2-3</a><br> </noscript> </body> </html>
その他の回答 (1)
- m035
- ベストアンサー率44% (38/86)
これでどうでしょうか？ カテゴリー1はc1.html、カテゴリー2はc2.htmlとしてあります。 JavaScriptOFF（ボタンの代わりにリンク）、iframe非対応の場合の対処（別ウィンドウで開く）済み。 <html> <head> <script type="text/javascript"> <!-- var ifra_no=0; function n_win(url){ window.open(url,"w1","");//window.open(url,target,option);optionは自分で設定してください。 } function ch(f){ if(ifra_no==1){ if(f==1){ n_win('c1.html'); } else{ n_win('c2.html'); } } else if(f==1){ document.getElementsByName('ifra')[0].src="c1.html"; } else{ document.getElementsByName('ifra')[0].src="c2.html"; } } function rand(){ if(!document.getElementsByName){ ifra_no=1; } for(i=0;i<Math.round(Math.random());i++){ ch(); } } //--> </script> </head> <body> <script type="text/javascript"> <!-- var b1='<input type="button" value="カテゴリー1" onclick="ch(1)">'; var b2='<input type="button" value="カテゴリー2" onclick="ch(2)">'; document.write(b1+b2); rand(); //--> </script> <noscript> <a href="c1.html" target="ifra">カテゴリー1</a> <a href="c2.html" target="ifra">カテゴリー2</a> </noscript> <br><br> <iframe src="c1.html" name="ifra" id="ifra" style="width:100%;height:90%;"> iframeに対応していないようなので、別ウィンドウにリンクは開かれます。 <script type="text/javascript"> <!-- ifra_no=1; //--> </script> </iframe> </body> </html>
補足
m035さん、丁寧なご解答ありがとうございます。 こちらの説明不足でした。 せっかく貴重なお時間を費やしていただいて申し訳ありません。 私が今やろうとしているのは、 1つのＨＴＭＬ内にある2箇所の表示部分をランダムで表示し、かつ、ボタン操作でもその2箇所の表示を切り替えることができるようにしたいのです。 さらに、その2箇所の内容は、カテゴリーによって連動するようにしたいのです。 3つのカテゴリーがあり、カテゴリー1に対するコンテンツ１とコンテンツ２。 カテゴリー2に対するコンテンツ１とコンテンツ２と言うような形です。 さらにこれらのコンテンツ部分はインラインフレーム、別窓などは使えないのです。 1枚のＨＴＭＬで、リロードのたびに、各カテゴリーに該当する2箇所の表示をランダムで切り替え、さらにボタンクリックでボタンに該当するカテゴリー用の表示（2箇所）に切り替えたいのです。 また、javascriptをoffにしているユーザに関しては、<noscript>タグで、カテゴリー１用の表示をする。 最初に私がしようとしたのは、以下のような感じです。 外部jsファイルです。 ///////////////////////////////////////////////// //0～2の乱数を変数randomFlgへ //この値によってカテゴリーを決定 randomFlg = Math.floor(Math.random()*3); //コンテンツ１部分*********************************** function random_contents1() { if(randomFlg == 0) { //カテゴリー1表示 document.writeln('ソース'); document.writeln('ソース'); ・・・ } else if(randomFlg == 1) { //カテゴリー２表示 document.writeln('ソース'); document.writeln('ソース'); ・・・ } else if(randomFlg == 2) { //カテゴリー3表示 document.writeln('ソース'); document.writeln('ソース'); ・・・ } ////////////////////////////////////////////// これと同じような形でコンテンツ２部分を設定。 そしてhtml部分で コンテンツ１の部分に該当する箇所でrandom_contents1()を呼び出す。 同じようにコンテンツ２部分でコンテンツ２用の関数を呼び出す。 と言うようにしたのですが、 この段階で、ボタン操作を組み込めないことに気づき、困ってしまったのです。 （後のことを考えず初めてしまった自分が悪いのですが） 自分でもいろいろ模索しているのですが、どうもいい方法が思いつきません。 例えば、ボタンを押すことによって、リロードせずに該当箇所のソースを切り替えることはできないのでしょうか？（フォームのクリアボタンのように） もしくは、もっとスマートな別の方法があるのでしょうか？ そもそもjavascriptでは、このようなことができないのでしょうか？ 説明不足で申し訳ありませんでした。 これで伝わりますでしょうか？ 宜しくお願いいたします。
お礼
m035さん。 いろいろありがとうございました。 やはり、自分自身フレームを使えればと思っているのですが、フレームは使えないので、 案３～５のいずれかで都合の良いものを模索しています。 document.getElementById() という便利なものがあるのですね。勉強不足でした。 大変参考になりました。本当にありがとうございました。