OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
締切り
済み

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

  • すぐに回答を!
  • 質問No.190428
  • 閲覧数247
  • ありがとう数3
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 36% (29/79)

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

回答 (全3件)

  • 回答No.1
レベル12

ベストアンサー率 75% (398/526)

メニューのプルダウン自体を、JavaScriptの外部ファイルに関数として書いてしまってはどうでしょうか。 HTMLのプルダウンの場所には、   <SCRIPT language="JavaScript">   <!--   make_quick_menu();   //-->   </SCRIPT> のように書いておき、外部ファイ ...続きを読む
メニューのプルダウン自体を、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>');
  }
のような感じで書いておく。
補足コメント
ronnie

お礼率 36% (29/79)

すみません。早速やってみたのですが、どうもうまくいきません(・・;)。以下が作った外部ファイルと、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>');
  }
投稿日時 - 2001-12-26 02:37:40


  • 回答No.2
レベル14

ベストアンサー率 50% (1122/2211)

やり方は幾つかあると思います。とりあえず、カテゴリ通り、JavaScript で 何とかする方法を。 select の option は、その内容を JavaScript でいじることができます。 リンク先を option の value に設定するような感じで、以下のようになります。 <html><head><title>test</title& ...続きを読む
やり方は幾つかあると思います。とりあえず、カテゴリ通り、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>

# ちょっと、力技過ぎるかな?
  • 回答No.3
レベル12

ベストアンサー率 75% (398/526)

あれ?プルダウンメニュー自体は出来てたんじゃないんですか? この <SELECT>~</SELECT> では、普通に書いてもリンクはしませんよ。 外部ファイルに、次の内容を追加して下さい。   function PageJump(sel) {     location.href = sel.options[sel.selectedIndex].value;   } ...続きを読む
あれ?プルダウンメニュー自体は出来てたんじゃないんですか?
この <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>');
  }
お礼コメント
ronnie

お礼率 36% (29/79)

ありがとうございます。ただ、私自身JSはあんまり詳しくない、というか専門でもなく素人なので、あまり教えていただいた範囲では、稼動させることができませんでした(-_-;)。。知識不足で。。。
でも、http://www.wsabstract.com/script/script2/jstohtml.shtml でJSに変換してくれるConverterサイトを見つけて、HTML内の記述の仕方も書いてくれているので、それをそのままコピペしたら、以外にできました(^_^.)。
とりあえず、何度もありがとうございました。
投稿日時 - 2001-12-28 15:34:28
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ