WEST MiRa JavaScript：サンプル集(257種類) - フォーム - ポップアップメニューVer3（同ページ）

[ JavaScriptの目次 ]

▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]

◆↑ホームへ

■ JavaScript - サンプル集(257種類) - フォーム
　　 - ポップアップメニューVer3（同ページ）

サンプル・ライブラリ・素材　-　All About ［JavaScript］

ポップアップメニューから項目を選ぶと、そのままジャンプするスクリプトです。
これは同ページの指定した位置へジャンプします。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る

[ ソース ]


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	function jump2()
		{	location.href="#"+document.form1.sele1.selectedIndex;	}

//-->
</script>

</head>

<body>

<form name="form1">
<select name="sele1" onChange="jump2();">
<option>
<option>１
<option>２
<option>３
<option>４
<option>５
</select>
</form>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="1"><font size="6">１</font></a>
……書きたい内容

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a name="2"><font size="6">２</font></a>
……書きたい内容

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a name="3"><font size="6">３</font></a>
……書きたい内容

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a name="4"><font size="6">４</font></a>
……書きたい内容

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a name="5"><font size="6">５</font></a>
……書きたい内容
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body></html>

[ 解説 ]

まず上から５行目にある「my_url="select3.html";」の「select3.html」部分に使用するHTMLの名前をお書き下さい。

上から１５行目にある「<option>１」の「１」の部分に、ポップアップメニューで表示させたいお好きな項目名をお書き下さい。
同じように１６～１９行目までにある、「２」「３」「４」「５」の部分にもお好きな項目名をお書き下さい。

上から２３行目にある
<a name="1">１</a>
の部分に、ポップアップメニューの「１」の項目がジャンプしてきます。
「１」と書いてあるのは、お好きな項目見出しに変更して、その下にお好きな内容を書いて下さい。

そのまま続いて２６，２９，３２，３５行目がそれぞれ、「２」「３」「４」「５」に対応していますので、そちらもお好きなように変更して下さい。

もし項目数を減らしたい場合は、
<option>５
<a name="5">５</a>
を削除して下さい。
もっと減らす場合、同じように上の文章で「５」の部分が「４」になってる文章を２つずつ削除していって下さい。

項目を増やす場合は、同じように
<option>５
<a name="5">５</a>
を追加します。

追加する場所は、
<option>５
は２０行目に、
<a name="5">５</a>
は下から７行目に追加して下さい。
で、項目名の部分はお好きなように変更して下さい。

そしてその時、必ず赤字の「5」の部分を、半角で「6」に変更して下さい。
項目をどんどん増やしていきたい場合は、同じように「6」を「7」に、と一つずつ数を増やしていって下さい。

毎週更新！「散財記～スタッフが買っちゃったこの商品！～」

　 WEST MiRa > JavaScript > サンプル集(257種類) > フォーム > ポップアップメニューVer3（同ページ） >

バナー、リンクについて , 利用規約 , ヘルプ