jsの選択と転送ナビゲーションメニューのサンプルコード

ホームページ

ウェブフロントエンド

jsチュートリアル

jsの選択と転送ナビゲーションメニューのサンプルコード_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:39 PM

ナビゲーションメニュー移行選ぶ

HTML インターフェースを実装する

<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation</title>
<script src="script01.js"></script>
<link rel="stylesheet" href="script01.css" rel="external nofollow" >
</head>
<body>
<form action="gotoLocation.cgi" class="centered">
<select id="newLocation">
<option selected>Select a topic</option>
<option value="script06.html">Cross-checking fields</option>
<option value="script07.html">Working with radio buttons</option>
<option value="script08.html">Setting one field with another</option>
<option value="script09.html">Validating Zip codes</option>
<option value="script10.html">Validating email addresses</option>
</select>
<noscript>
<input type="submit" value="Go There!">
</noscript>
</form>
</body>
</html>

ログイン後にコピー

メニューナビゲーションを実装する

window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById ("newLocation");
var newPage = newLoc.options [newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}

ログイン後にコピー

以下はソースコード解析です
1.

window.onload = initForm;
window.onunload = function() {};
ウィンドウがロードされると、initForm() 関数が呼び出されます。次の行は、一部のブラウザの奇妙な動作に対処するための回避策であるため、説明が必要です。

ウィンドウがアンロードされるとき (つまり、ウィンドウが閉じられるか、ブラウザが別の URL に移動するとき)、匿名関数、つまり名前のない関数を呼び出します。この例では、関数には名前がないだけでなく、何も行いません。この関数が提供されるのは、onunload を何らかの値に設定する必要があるためです。そうしないと、ブラウザの [戻る] ボタンをクリックしたときに、ページが一部のブラウザ (Firefox や Safari など) にキャッシュされるため、onload イベントがトリガーされません。 onunload に何も実行させるとページがキャッシュされなくなるため、ユーザーがバックオフすると onload イベントが発生します。

匿名とは、関数と () の間に名前がないことを意味します。これは、onunload をトリガーしながら何も行わせない最も簡単な方法です。他の関数と同様に、中括弧には関数の内容が含まれます。この関数は何も行わないため、ここの中括弧は空です。

document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = JumpPage;
initForm() 関数の最初の行は、HTML ページ上のメニュー (その ID は newLocation) を取得し、その selectedIndex プロパティを 0 に設定します。これにより、トピックの選択が表示されます。
2 行目は、メニュー選択が変更されたときに、jumpPage() 関数を呼び出すようにスクリプトに指示します。

var newLoc = document.getElementById("newLocation");
JumpPage() 関数では、newLoc 変数が訪問者がメニューで選択した値を探します。

var newPage = newLoc.options[newLoc.selectedIndex].value;
角括弧内のコードから始めて、外側に向かって進めていきます。 newLoc.selectedIndex は 0 ～ 5 の数値です (
が 6 つあるため) メニューオプション。 JavaScript の番号付けは多くの場合 0 から始まることに注意してください)。この番号を取得したら、対応するメニュー項目を取得します
の値、これはジャンプ先の Web ページの名前です。次に、結果を変数 newPage に代入します。

if (newPage != "") {
window.location = newPage;
この条件ステートメントは、最初に newPage が空でないかどうかをチェックします。言い換えれば、newPage に値がある場合、ウィンドウを
に移動させます。選択したメニュー項目で指定された URL。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7625

CakePHP チュートリアル

1389

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

138

Related knowledge

壁紙エンジンを家族間で共有できますか? Mar 18, 2024 pm 07:28 PM

壁紙はファミリー共有をサポートしていますか? 残念ながら、サポートされていません。それでも、解決策はあります。たとえば、小さいアカウントで購入したり、最初に大きいアカウントでソフトウェアや壁紙をダウンロードしてから小さいアカウントに変更したりすることができます。ソフトウェアを起動するだけでまったく問題ありません。壁紙エンジンはファミリー共有できますか? 回答: 現在、壁紙はファミリー共有機能をサポートしていません。 1.WallpaperEngine は家族共有環境には適していないようです。 2. この問題を解決するには、新しいアカウントの購入を検討することをお勧めします; 3. または、最初にメインアカウントで必要なソフトウェアと壁紙をダウンロードしてから、他のアカウントに切り替えることをお勧めします。 4. 軽くクリックしてソフトウェアを開くだけで問題ありません。 5. 上記の Web ページでプロパティを表示できます。」

壁紙エンジンでロック画面の壁紙を設定するにはどうすればよいですか?壁紙エンジンの使い方 Mar 13, 2024 pm 08:07 PM

WallpaperEngine は、デスクトップの壁紙を設定するためによく使用されるソフトウェアです。ユーザーは、WallpaperEngine でお気に入りの写真を検索して、デスクトップの壁紙を生成できます。また、コンピュータから写真を WallpaperEngine に追加して、コンピュータの壁紙として設定することもできます。壁紙エンジンがロック画面の壁紙を設定する方法を見てみましょう。壁紙エンジン設定ロック画面の壁紙チュートリアル 1. まずソフトウェアに入り、インストール済みを選択し、「壁紙オプションの設定」をクリックします。 2. 別の設定で壁紙を選択した後、右下の「OK」をクリックする必要があります。 3. 次に、上の設定とプレビューをクリックします。 4. 次へ

iBatis と MyBatis: どちらがあなたにとって優れていますか? Feb 19, 2024 pm 04:38 PM

iBatis と MyBatis: どちらを選択するべきですか?はじめに: Java 言語の急速な発展に伴い、多くの永続化フレームワークが登場しました。 iBatis と MyBatis は 2 つの人気のある永続化フレームワークであり、どちらもシンプルで効率的なデータアクセスソリューションを提供します。この記事では、iBatis と MyBatis の機能と利点を紹介し、適切なフレームワークを選択するのに役立つ具体的なコード例をいくつか示します。 iBatis の紹介: iBatis はオープンソースの永続化フレームワークです。

壁紙エンジンの映画を見るとウイルスに感染することがありますか? Mar 18, 2024 pm 07:28 PM

WallpaperEngine を使用すると、さまざまな壁紙をダウンロードでき、ダイナミック壁紙も使用できます。WallpaperEngine で動画を視聴するときにウイルスに感染しているかどうかわからないユーザーも多くいますが、動画ファイルがウイルスとして使用されることはありません。壁紙エンジンで映画を見るときにウイルスはありますか? 答え: いいえ。 1. 動画ファイルだけではウイルスとして利用できません。 2. ウイルス感染のリスクを避けるために、信頼できるソースからビデオをダウンロードし、コンピュータのセキュリティ対策を維持するようにしてください。 3. アプリケーションの壁紙は apk 形式であり、apk にはトロイの木馬ウイルスが含まれている可能性があります。 4.WallpaperEngine自体にはウイルスはありませんが、クリエイティブワークショップの一部のアプリケーション壁紙にはウイルスが感染している可能性があります。

CS プレーヤーの第一選択: 推奨されるコンピューター構成 Jan 02, 2024 pm 04:26 PM

1. プロセッサコンピュータ構成を選択する場合、プロセッサは最も重要なコンポーネントの 1 つです。 CS などのゲームをプレイする場合、プロセッサーのパフォーマンスはゲームのスムーズさや応答速度に直接影響します。 Intel Core i5 または i7 シリーズプロセッサを選択することをお勧めします。これらのプロセッサは、強力なマルチコア処理能力と高周波数を備え、CS の高い要件に簡単に対応できるためです。 2. グラフィックスカードグラフィックスカードは、ゲームのパフォーマンスを左右する重要な要素の 1 つです。 CSなどのシューティングゲームでは、グラフィックカードの性能がゲーム画面の鮮明さや滑らかさに直結します。優れたグラフィックス処理能力と高いフレームレート出力を備え、より優れたゲーム体験を提供できる NVIDIA GeForce GTX シリーズまたは AMD Radeon RX シリーズグラフィックスカードを選択することをお勧めします。

壁紙エンジンの壁紙はどのフォルダにありますか? Mar 19, 2024 am 08:16 AM

壁紙を利用する場合、ユーザーは自分の好みの壁紙をダウンロードして利用することができますが、その壁紙がどのフォルダーにあるのか分からないユーザーも多くいます。壁紙はどのフォルダにありますか? 答え: コンテンツフォルダです。 1. ファイルエクスプローラーを開きます。 2. 左側の「このPC」をクリックします。 3.「STEAM」フォルダーを見つけます。 4.「steamapps」を選択します。 5.「ワークショップ」をクリックします。 6. 「コンテンツ」フォルダーを見つけます。

壁紙エンジンは多くの電力を消費しますか? Mar 18, 2024 pm 08:30 PM

ユーザーは、WallpaperEngine を使用するときに自分のコンピュータの壁紙を変更できます。多くのユーザーは、WallpaperEngine が大量の電力を消費することを知りません。動的壁紙は静的壁紙よりも若干多くの電力を消費しますが、それほど多くはありません。壁紙エンジンは多くの電力を消費しますか? 回答: それほど多くはありません。 1. 動的壁紙は静的壁紙よりも若干多くの電力を消費しますが、それほど多くはありません。 2. ダイナミック壁紙をオンにすると、コンピュータの電力消費量が増加し、少量のメモリ使用量が奪われます。 3. ユーザーは、ダイナミック壁紙の深刻な電力消費を心配する必要はありません。

Microsoft Edge ブラウザーでフォントサイズを変更する方法 - Microsoft Edge ブラウザーでフォントサイズを変更する方法 Mar 04, 2024 pm 05:58 PM

Microsoft Edge ブラウザに馴染みがないと思いますが、Microsoft Edge ブラウザのフォントサイズを変更する方法をご存知ですか? Microsoft Edge ブラウザのフォントサイズを変更する方法については、次の記事で説明していますので、一緒に勉強してみましょう。まず、Microsoft Edge ブラウザを見つけてダブルクリックして開きます。 Microsoft Edge ブラウザーはデスクトップのショートカット、スタートメニュー、またはタスクバーにあり、ダブルクリックして開きます。次に、[設定] インターフェイスを開いてこのブラウザインターフェイスに入り、左上隅にある [...] ロゴをクリックし、[設定] をダブルクリックして設定インターフェイスを開きます。もう一度、[外観]インターフェイスを見つけて開き、マウスで下にスクロールします。

See all articles