- 締切済み
ＪＳでプルダウンメニューリンクジャンプについて質問です。
プルダウンメニューで、サイト全体のメニューを入れ込んでクイックジャンプ、みたいにして作っていますが、スクリプト部分は、ＨＥＡＤにいれて、外部ファイルでリンクをさせているのですが、実際に表示される<FORM>～</FORM>部分は、全てのページのBODY内に書き込む必要がありますよね？それは、たとえば、サイト内のメニューが変更になったりしたときには、今まで作った全てのページにコピペーストした<FORM>~</FORM>内容をまた、全部１ページづつ変更してゆかなくてはならない、、、という方法しかないのでしょうか？何か他に、１枚のテンプレートみたいなところにリンクをさせて、その1枚を変更すれば、そのテンプレートを使用している全ページが一気に変更になる、、というようなことはできるのでしょうか。。。教えてください。
- ronnie
- お礼率36% (29/79)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- leaz024
- ベストアンサー率75% (398/526)
あれ？プルダウンメニュー自体は出来てたんじゃないんですか？ この <SELECT>～</SELECT> では、普通に書いてもリンクはしませんよ。 外部ファイルに、次の内容を追加して下さい。 function PageJump(sel) { location.href = sel.options[sel.selectedIndex].value; } また、make_quick_menu 関数の内容を、次のように書き換えて下さい。 function make_quick_menu() { document.write('<SELECT name="menu" onChange="PageJump(this)">'); document.write('<OPTION value="shop.htm">★オンラインショッピング★'); document.write('<OPTION value="list.htm"> ├商品一覧・注文ページへ'); document.write('<OPTION value="how2shop.htm"> ├ショッピングの流れ'); document.write('</SELECT>'); }
- a-kuma
- ベストアンサー率50% (1122/2211)
やり方は幾つかあると思います。とりあえず、カテゴリ通り、JavaScript で 何とかする方法を。 select の option は、その内容を JavaScript でいじることができます。 リンク先を option の value に設定するような感じで、以下のようになります。 <html><head><title>test</title></head> <body> <form name="X"> <select name="S" onChange="jump_to()"> </select> </form> <!-- ★★★★★★ ここから --> <script type="text/JavaScript"> S = document.X.S; if (S.options.length < 1) { S.options[0] = new Option("ジャンプ先1", "http://host/dir/1"); S.options[1] = new Option("ジャンプ先2", "http://host/dir/2"); S.options[2] = new Option("ジャンプ先3", "http://host/dir/3"); S.options[3] = new Option("ジャンプ先4", "http://host/dir/4"); S.options[4] = new Option("ジャンプ先5", "http://host/dir/5"); history.go(0); } function jump_to() { S = document.X.S; url = S[S.selectedIndex].value; location = url; } </script> <!-- ★★★★★★ ここまでを外部スクリプトに！ --> </body> </html> ＃ ちょっと、力技過ぎるかな？
- leaz024
- ベストアンサー率75% (398/526)
メニューのプルダウン自体を、JavaScriptの外部ファイルに関数として書いてしまってはどうでしょうか。 HTMLのプルダウンの場所には、 <SCRIPT language="JavaScript"> <!-- make_quick_menu(); //--> </SCRIPT> のように書いておき、外部ファイル内に function make_quick_menu() { document.write('<SELECT name="xxx" onChange="xxxxxx">'); document.write('<OPTION>xxx'); ： document.write('</SELECT>'); } のような感じで書いておく。
補足
すみません。早速やってみたのですが、どうもうまくいきません(・・;)。以下が作った外部ファイルと、Body内の実行場所なんですが、、、間違っていますか。。。 Body内（表示させたい場所に） <SCRIPT language="JavaScript" SRC="menu.js"> <!-- make_quick_menu(); //--> </SCRIPT> 外部ファイル（menu.js） function make_quick_menu() { document.write('<SELECT name="--各ページへジャンプ！--" onChange="">'); document.write('<OPTION>"★オンラインショッピング★" onChange="shop.htm">'); document.write('<OPTION>" ├商品一覧・注文ページへ" onChange="list.htm">'); document.write('<OPTION>" ├ショッピングの流れ" onChange="how2shop.htm">'); document.write('</SELECT>'); }
お礼
ありがとうございます。ただ、私自身JSはあんまり詳しくない、というか専門でもなく素人なので、あまり教えていただいた範囲では、稼動させることができませんでした(-_-;)。。知識不足で。。。 でも、http://www.wsabstract.com/script/script2/jstohtml.shtml でJSに変換してくれるConverterサイトを見つけて、HTML内の記述の仕方も書いてくれているので、それをそのままコピペしたら、以外にできました(^_^.)。 とりあえず、何度もありがとうございました。