JavaScriptのサンプル
フォームのセレクトボックスでリンクするスクリプトです。(選択のみでジャンプするタイプ)
フレームにも対応しています。
コード
<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
// 設定開始
// (フレームの場合は、表示先のフレーム名を設定してください)
// (top を指定すると、フレームの分割を廃止して画面全体で表示します)
// (blank を指定すると、新規ウィンドウで表示します)
var target = "";
// 設定終了
function jump(){
var url = document.form1.select.options[document.form1.select.selectedIndex].value;
if(url != "" ){
if(target == 'top'){
top.location.href = url;
}
else if(target == 'blank'){
window.open(url, 'window_name');
}
else if(target != ""){
eval('parent.' + target + '.location.href = url');
}
else{
location.href = url;
}
}
}
// -->
</script>
</head>
<body>
<form action="#" name="form1">
<select name="select" onChange="jump()">
<option value="">選択してください</option>
<option value="../../index.html">トップページ</option>
<option value="../../html_tag/index.html">HTMLタグ</option>
<option value="../../stylesheet/index.html">スタイルシート</option>
<option value="../../javascript/index.html">JavaScript</option>
<option value="../../color/index.html">カラーチャート</option>
</select>
</form>
</body>
</html>
解説
<head>
~ </head>
内にスクリプトを記述しておき、セレクトボックスの選択でスクリプトを実行します。
optionタグで指定したURLにジャンプします。URLの部分が空の場合は、何も変化しません(ジャンプしません)。
フレームを使用している場合
フレームを使用している場合で、リンク先のページを別フレームに表示したい場合には、// 設定開始
~ // 設定終了
の部分で表示先のフレーム名を設定します。
var target = "main";
main
と書かれた部分にフレーム名を記述してください。
フレームの分割を廃止して画面全体で表示したい場合には、この部分に top
を指定します。
var target = "top";
同じフレーム内に表示する場合は、これらの設定は必要ありません。
新規ウィンドウで表示する場合
リンク先のページを新規ウィンドウで表示したい場合は、設定部分で blank
を指定します。
var target = "blank";
- スクリプト内の
window_name
の部分は、新規ウィンドウに付けられるウィンドウ名です。
青い文字の部分は、必要に応じて書き換えてください。