WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
jbZ

■ JavaScript - サンプル集(257種類) - リンク
   - ポップアップメニューVer3(同ページ)

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

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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>1
<option>2
<option>3
<option>4
<option>5
</select>
</form>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="1"><font size="6">1</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">2</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">3</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">4</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">5</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>


[ 解説 ]

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

上から15行目にある「<option>1」の「1」の部分に、 ポップアップメニューで表示させたいお好きな項目名をお書き下さい。
同じように16〜19行目までにある、「2」「3」「4」「5」の部分にもお好きな項目名をお書き下さい。

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

そのまま続いて26,29,32,35行目がそれぞれ、 「2」「3」「4」「5」に対応していますので、そちらもお好きなように変更して下さい。

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

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

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

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


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

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.