ＪＳでプルダウンメニューリンクジャンプについて質問です。

締切済

質問者：ronnie
質問日時：2001/12/25 17:07
回答数：3件

プルダウンメニューで、サイト全体のメニューを入れ込んでクイックジャンプ、みたいにして作っていますが、スクリプト部分は、ＨＥＡＤにいれて、外部ファイルでリンクをさせているのですが、実際に表示される<FORM>～</FORM>部分は、全てのページのBODY内に書き込む必要がありますよね？それは、たとえば、サイト内のメニューが変更になったりしたときには、今まで作った全てのページにコピペーストした<FORM>~</FORM>内容をまた、全部１ページづつ変更してゆかなくてはならない、、、という方法しかないのでしょうか？何か他に、１枚のテンプレートみたいなところにリンクをさせて、その1枚を変更すれば、そのテンプレートを使用している全ページが一気に変更になる、、というようなことはできるのでしょうか。。。教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.1

回答者： leaz024
回答日時：2001/12/25 17:37

メニューのプルダウン自体を、JavaScriptの外部ファイルに関数として書いてしまってはどうでしょうか。

HTMLのプルダウンの場所には、
　　<SCRIPT language="JavaScript">
　　
　　</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">
　　
　　</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>');
　　}

補足日時：2001/12/26 02:37

通報する

- 0
- 件

通報する

No.2

回答者： a-kuma
回答日時：2001/12/25 17:52

やり方は幾つかあると思います。

とりあえず、カテゴリ通り、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>

＃ちょっと、力技過ぎるかな？

- 0
- 件

通報する

No.3

回答者： leaz024
回答日時：2001/12/27 16:49

あれ？プルダウンメニュー自体は出来てたんじゃないんですか？

この <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>');
　　}

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。ただ、私自身JSはあんまり詳しくない、というか専門でもなく素人なので、あまり教えていただいた範囲では、稼動させることができませんでした(-_-;)。。知識不足で。。。
でも、http://www.wsabstract.com/script/script2/jstohtm …　でJSに変換してくれるConverterサイトを見つけて、HTML内の記述の仕方も書いてくれているので、それをそのままコピペしたら、以外にできました(^_^.)。
とりあえず、何度もありがとうございました。

通報する

お礼日時：2001/12/28 15:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！