ホームページ作成ガイド

コンボボックスを使ってジャンプをするロジックを考える

そこでまず１番目のロジックから考えてみましょう。メニューのようにアイテムを利用するなら、リストボックスよりもコンボボックスを使ったほうがいいでしょう。この手法はサイトのコンテンツが増えてきた場合に、目次的に使われる手法なので覚えておいて損はありません。まず、ジャンプするための関数myJumpを作ります。

<script language="JavaScript"></script>

一番最初のmySelectはコンボボックスの項番号を取得します。項番号は０からスタートして項目の最後までの番号を取得します。
次のlocation.hrefでは、mySelectで取得した項番号のURLへリンクされます。

●フォームの記述
次にフォームを記述しましょう。フォーム名はmyFormです。

<form name="myForm">
<select name="myMenu">
<option value="index.html" >トップページへ
<option value="page2.html">2ページ目
</select>
<input type="button" value="Jump" onClick="myJump()">
</form>

上の例ではコンボボックスの隣にボタンを設定し、「Jump」ボタンをクリックすると、ボックスでセレクトした項目のページへジャンプする仕組みです。

●同ページへのリンクは？
同ページへのリンクは通常<A HREF="#">という形で#の後ろにリンクする部分の値を入れ、該当する箇所に<A name="">という形で""の後に設定した値のリンクを取得します。例えばページ内の1番、2番、3番へのページ内でのリンクの場合、

<A HREF="#1ban">ここから</A>
<A HREF="#2ban">つぎ</A>
<A HREF="#3ban">そのつぎ</A>

<A name="1ban">1番</A>
<A name="2ban">2番</A>
<A name="3ban">3番</A>

という形になります。

●そこでサンプルコード
ということで上の２つを合わせて以下のようなコードになります。

<HTML>
<BODY>
<script language="JavaScript"></script>

<form name="myForm">
<select name="myMenu">
<option value="#koko" >ここ
<option value="#soko">そこ
<option value="#asoko" >あそこ
<option value="#doko" >どこ
</select>
<input type="button" value="Jump" onClick="myJump()">
</form>
<P>
<A name="koko">ここです</A>
<P>
<A name="soko">そこです
<P>
<A name="asoko">あそこです</A>
<P>
<A name="doko">どこです？</A>
<P>
</BODY>