• 締切済み

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

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

みんなの回答

  • leaz024
  • ベストアンサー率75% (398/526)
回答No.3

あれ？プルダウンメニュー自体は出来てたんじゃないんですか？ この <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
質問者

お礼

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

  • a-kuma
  • ベストアンサー率50% (1122/2211)
回答No.2

やり方は幾つかあると思います。とりあえず、カテゴリ通り、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)
回答No.1

メニューのプルダウン自体を、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
質問者

補足

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • プルダウンメニューのリンク

    教えてください☆ プルダウンメニューでページ内に ジャンプすることは出来ますか？ ページ内に普通にリンクする時は、 <a href="#○○">リンク</a> っていう風にするから、 プルダウンでも <OPTION VALUE="#○○"> ↑こんな風に指定したんですけど、 アップロードして試してみたら エラーになってしまいました。 プルダウンメニューでのリンクの <OPTION VALUE="★"> の★には、 「○○.html」みたいなのしか 指定できないの？？

  • プルダウンメニューからのリンクの貼り方

    ＦＯＲＭのプルダウンメニューからリンクをはっていますが、新しいページを開くのはどうしたら良いでしょう？ 今は <select name="menu" size="1" onchange="location=this.options[this.selectedIndex].value"> と書いていて、同じページ内で別ページに移動します。 またプルダウンメニューからのリンクで、ページサイズを指定したり、スクロールバー、ツールバーの表示も指定したいのですが出来るのでしょうか？ ご存知なかたはよろしくお願いします。

  • Java Scriptのプルダウンメニューについて

    WindowｓのInternet Explorer 4.0、 Netscape Navigator 4.7以上、を対象としたホームページを作成しています。 この中でプルダウンメニューを使うことを考えていますが、Java Scriptをオフにしても全サイトきちんと見れるようにしたいです。 つまりオフにしてもメニューが出る、もしくはメインのメニューからリンクが張られていてプルダウンからはリンクできなくてもプルダウンメニューと同じ項目のあるインデックスのページに飛べるような。 そんなことは出来るのでしょうか？ 例えば、http://www.omron.co.jp/ir/index.html のサイトでJava Scriptをオフにした時はプルダウンが無い状態になり少なくともメインメニューからは目的のコンテンツにたどり着けるような。 ちなみに、http://www.omron.co.jp/ir/index.htmlのサイトをJava Scriptをオフにした状態で閲覧してもきちんと見ることが出来たのは何でだろ～？？？ どうかよろしくお願い致します。

  • JavaScriptのプルダウン

    プルダウンメニューの中から選択したページへジャンプするようにしたいのですがわからないところがあるので教えてください。 TOPページはframesetでmenu、TOP2の上下に分かれています。プルダウンメニューはmenuのページに置き、選択したページを表示するのは下のTOP2の部分に表示させたいんです。 下記のように記述したのですがこのままだとジャンプしたページはmenuに表示されてしまいます。 －－－－－－－－－－－－－－－－－－－－ <script Language="JavaScript"> <!-- function popJump(selOBJ) { n = selOBJ.selectedIndex; location.href = selOBJ.options[n].value; } // --> </script> </head> <body> <form> <select onChange="popJump(this)"> <option value="#">選択して下さい <option value="top2.htm">トップページ <option value="A.htm">A <option value="B.htm">B </select> </form> －－－－－－－－－－－－－－－－－－－－ <option value="A.htm">のところでTOP2へジャンプするように指定するのだと思うのですが その方法がいろいろ調べてみたのですがわかりません。 わかる方、アドバイスをお願いします。

  • ジャンプメニューについて（DREAMWEVER4）

    DREAMWEVER4を使って、ホームページを作っています。ジャンプメニューを作成したのですが、リンクしたページへつながりません。どういったエラーが考えられますか？ いろんなテキストを読んだのですが、どれも例題は同じホームページ内なんですが、私はジャンプメニューで他のページへ移動させたいと考えています。 例えば、お気に入りのプルダウンを作って、自分の好きなページ（リンクフリーのところ等）へ簡単に移動させたいのです。 ちゃんとフォームに「ジャンプメニューの挿入」とゆう手順で、テキスト通りに作ったのですが、プレビューしてみても、アップしても、ジャンプしません・・・・。どうすればよいですか？？？

    • ベストアンサー
    • CSS
  • プルダウンメニューの選択時のリンク先について

    「プルダウンメニューから選択すると、別ページにリンク」するページを 作成したいです。 以下の様に途中まではできたのですが、 「フレームを使わず、同じウインドウの別の箇所にリンク先を表示 　※プルダウンメニューはそのまま表示」 がどうしてもできません。xmlで作成している関係上、phpも使えません。 何か方法はありませんでしょうか。 <SCRIPT LANGUAGE="JavaScript"> <!-- function menuLink(linkLoc) { if(linkLoc !="") {window.aaa.location.href=linkLoc;} } //--> </SCRIPT> <form> <SELECT onChange="menuLink(this.options[this.selectedIndex].value)"> <OPTION SELECTED>Select</OPTION> <OPTION value="">××</OPTION> <OPTION value="">●●</OPTION> </SELECT> </form>

  • プルダウンメニューにリンクをつけたい

    プルダウンメニューをクリックすると、別ページで別ホームページへリンクさせたいのですが、方法はありませんか？

  • プルダウンメニューリンクを新しいウインドウで表示させたい

    ホームページビルダー11を使っています。プルダウンメニューからリンク先を「新しいウインドウ」で表示させるにはどのようにしたらよろしいのでしょうか。ご指導よろしくお願い致します <SCRIPT language="JavaScript"> <!--- 非表示 function quicklink(w){ if(w == "") return; document.quick.url.selectedIndex = 0; location.href =w; } //end ---> </SCRIPT> <FORM name="quick" action="./"><SELECT name="url" onchange="quicklink(this.form.url.options[this.form.url.selectedIndex].value)" size="1" tabindex="1"> <OPTION selected>■ リンク先を選んでクリック ■ </OPTION> <OPTION value="index.htm">その１</OPTION> <OPTION value="index-2.htm">その２</OPTION> <OPTION value="index-3.htm">その３</OPTION> </SELECT>←関連リンク先</FORM> <TABLE width="100%" border="1" cellpadding="0" cellspacing="0" class="hpb-subh02">

  • フレームを使ったプルダウンメニュー

    フレームで「ヘッダー・左メニュー・右メインページ」というように３分割にし、左メニューに置いたプルダウンから項目を選ぶと右メインに表示される、という構造にしたいと思っています。 <HEAD>～</HEAD>内↓ <script language="JavaScript"> function jump(form) { var myindex=form.destination.selectedIndex window.open(form.destination.options[myindex].value, target="main"); } //--> </SCRIPT> プルダウン部分↓ <FORM NAME="form"> <SELECT NAME="destination"> <OPTION VALUE="a.html" SELECTED>あ</OPTION> <OPTION VALUE="k.html">か</OPTION> <OPTION VALUE="s.html">さ</OPTION> <OPTION VALUE="t.html">た</OPTION> <OPTION VALUE="n.html">な</OPTION> </SELECT> <INPUT TYPE="image" SRC="go.gif" onClick="jump(this.form)" BORDER="0"> </FORM> という様に記述した所、例えばプルダウンで「た」を選択した場合、右フレームにちゃんとt.htmlが表示されるのですが、左フレームのプルダウンの項目が「あ」に戻ってしまいます。「た」を選択した状態のまま残したいのですが。 ちなみにボタンに画像を使わず、<INPUT TYPE="button" ・・・・>にするとなぜか「た」選択の状態でちゃんと残ります。でも、できれば画像を使いたいのです。 うまいやり方をご存じの方は、教えていただけますか。おねがいします。

  • プルダウンからリンクをthicboxで開くには？

    プルダウンからリンクをthicboxで開くには？ 宜しくお願い致します。 プルダウンでリンク先を選択し、そのリンク先のページをthicboxで表示させたく試行錯誤しているのですがうまくいきません。 thicboxでリンク先を開くためには、プルダウンのJavascriptをどのように修正すればよいのでしょうか？ ■プルダウンでリンクさせるJavascriptとhtmlコード <html> <head> <script type="text/javascript"> function navi(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url; } } </script> </head> <body> <form> <select name="navi"> <option value=""> --- リンクメニュー --- </option> <option value="http://www.yahoo.co.jp/">Yahoo!</option> <option value="http://www.goo.ne.jp/">Goo</option> </select> <input type=button value="表示する" onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value"> </form> </body> </html> ■thicboxでURLを開くときのコード ※jquery.jsやthicbox.js、cssファイル等の外部ファイルの記述は省いております。 <a href="http://www.yahoo.co.jp?TB_iframe=true&width=800&height=500" class="thickbox">リンクテキスト</a> ※width・heightは適当に入れている数字です。 分かりづらい説明で申し訳ありません。 補足説明致しますので、どうかご教授下さいますようお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する