無料でホームページ素材を提供しています。

サイトマップ [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

ホーム	掲示板	ブログ	FAQ	お問い合わせ

セレクトボックスでページへジャンプ

ページが増えてきたメニューに使うと面積を少なくできるので効果的です。しかし、このソースを使うと検索エンジンは、ほぼ間違い無くページへのテキストをアンカーテキストとしては無視しますので、メリット、デメリットをよく考えて使用して下さい。

サンプル

セレクトボックスのみ

セレクトボックス+ボタン

ソース

head内ソース

いずれのタイプでも以下のソースを<head>～</head>に貼ってください。

<script type="text/javascript"><!-- 
function jumpSelect()
{
num_item=document.url.item.selectedIndex;
	if(num_item!=""||num_item!=null)
	{
	location.href=document.url.item.options[num_item].value;
	}
}
// --></script>

body内ソース

<body>～</body>内の、部品を表示させたい位置に貼ってください。
選択できるページを増やしたい方は、<option>～</option>の行を増やして下さい。

▼セレクトボックスのみ

<form name="url">
<select name="item" onchange="jumpSelect()">
<option>選択して下さい。</option>
<option value="../index.html">ホーム</option>
<option value="../info.html">お知らせ</option>
<option value="../setup.html">動作環境について</option>
</select>
</form>

▼セレクトボックス+ボタン

<form name="url">
<select name="item">
<option>選択して下さい。</option>
<option value="../index.html">ホーム</option>
<option value="../info.html">お知らせ</option>
<option value="../setup.html">動作環境について</option>
</select>
<input type="button" onclick="jumpSelect()" value="Go!" />
</form>

《もくじへ│▲このページのトップへ

メニュー

グラフィック素材
HTMLとJavaScript素材
資料
おすすめランキング
HTML辞典
JavaScript辞典
便利情報
ホームページ運営講座
ホームページ用語集
リンク

Sponcerd Links

Recommend

│ホーム │FAQ │動作環境について │注意事項 │素材と資料の使い方 │

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送