HTMLのページにジャンプするにはどうすればいいですか？ヒントの共有-フロントエンドQ&A-php.cn

HTMLのページにジャンプするにはどうすればいいですか？ヒントの共有

PHPz

リリース： 2023-04-13 13:42:22

オリジナル

34006 人が閲覧しました

HTML ジャンプとは、ある Web ページのリンクから別の Web ページにジャンプするプロセスを指します。また、記事の上から下にジャンプするなど、同じページ内でジャンプすることもあります。 HTMLジャンプの方法とテクニックを見てみましょう。

1. ハイパーリンクジャンプ

ハイパーリンクは、HTML でジャンプする最も一般的な方法です。HTML にハイパーリンクタグを追加すると、ユーザーは [リンク] をクリックして他の Web ページにジャンプできます。または同じページ上の他の場所。

HTML ハイパーリンクジャンプの構文形式は次のとおりです。

<a href="跳转链接">链接文本</a>

ログイン後にコピー

このうち、「href」はリンクのターゲットアドレスを表し、他の Web ページの URL または場所を指定できます。同じページ内のID。

他の Web ページにジャンプします

他の Web ページにリンクをジャンプしたい場合は、「」に対象の Web ページの URL を指定するだけです。 href」属性。

例:

<a href="http://www.baidu.com">前往百度</a>

ログイン後にコピー

「Go to Baidu」リンクをクリックすると、Baidu のホームページにジャンプします。

同じページの内部アンカー位置にジャンプ

HTML文書にアンカーポイントを追加する方法をクリックするとジャンプできます。リンク同じページ上の別の場所に移動します。

HTML アンカーの構文形式は次のとおりです。

<a id="锚点ID">跳转文本</a>

ログイン後にコピー

このうち、「id」属性はアンカーの名前であり、英語の文字または数字の文字列を指定できます。

例:

<a id="section1">第一部分</a>
<a id="section2">第二部分</a>
<a id="section3">第三部分</a>

ログイン後にコピー

上記のコードは、ドキュメント内のさまざまな章に対応する 3 つのアンカーポイントを定義します。

ドキュメントの特定の部分にジャンプする必要がある場合、リンク内でアンカー名を指定するだけで済みます。

例:

<a href="#section2">跳转到第二部分</a>

ログイン後にコピー

「第 2 部にジャンプ」リンクをクリックすると、ページは自動的に第 2 部にスライドします。

2. JavaScript ジャンプ

ハイパーリンクに加えて、JavaScript コードを使用してページジャンプを実装することもできます。この方法はより柔軟で、より複雑なジャンプ要件を実現できます。

JavaScript ジャンプには 2 つの方法があり、1 つは window オブジェクトの location 属性を使用してページリダイレクトを実装する方法、もう 1 つはハイパーリンクの onClick イベントを使用して内部ページジャンプを実装する方法です。

window.location Jump

window.location オブジェクトには、現在のウィンドウの URL 情報が含まれています。その属性値を変更することで、ページジャンプやリダイレクトを実現できます。

JavaScript では、location.replace() メソッドを使用してページジャンプとリダイレクトを実現します。

例:

window.location.replace("http://www.baidu.com");

ログイン後にコピー

上記のコードを実行すると、ページはすぐに Baidu ホームページにジャンプします。

ハイパーリンク onClick イベントジャンプ

ハイパーリンクジャンプの使用に加えて、onclick イベントをハイパーリンクに追加し、イベントハンドラー関数コードに JavaScript を渡してページジャンプを実装することもできます。。

例:

<a href="#" onclick="window.location.href=&#39;http://www.baidu.com&#39;; return false">前往百度</a>

ログイン後にコピー

上記のコードの onclick イベントは、window.location.href プロパティをリダイレクトされた URL に設定し、false を返すことでデフォルトのリンクジャンプ動作を防ぎます。

3. HTML ジャンプテクニック

上で紹介したジャンプメソッドに加えて、HTML ジャンプをより便利かつ柔軟にするテクニックもいくつかあります。

パラメータ付きでジャンプ

ページにジャンプするときに、検索キーワードやユーザー ID などのパラメータを指定する必要がある場合があります。このとき、次のことが可能です。パラメータの形式で実装された URL を使用します。

例:

window.location.href="http://www.baidu.com/search?key=HTML";

ログイン後にコピー

上記のコードでは、URL パラメーター「key」の値として検索キーワード「HTML」が使用されており、ページがリダイレクトされると、次のページにジャンプします。 Baidu 検索ページとデフォルトの「HTML」検索。

ジャンプタイマー

ページにカウントダウンを追加し、時間に達した後にページにジャンプする必要がある場合があります。このとき、JavaScript タイマーを使用できます。成し遂げる。

例:

var timer = setTimeout(function(){
    window.location.href = "http://www.baidu.com";
}, 5000);

ログイン後にコピー

上記のコードは、setInterval メソッドを使用して、5 秒後に Baidu ホームページにジャンプします。

繰り返し送信を防止する

フォーム送信などの操作では、ユーザーが素早く複数回送信することがあり、サーバーに不必要な負荷がかかり、さらにはデータ異常が発生することがあります。が発生する可能性があります。重複送信を防ぐには、フォーム送信直後に送信ボタンを無効にするか、JavaScript を使用してページにジャンプします。

例:

<form action="submit.php" method="post" onsubmit="return false">
    <button onclick="submitForm()">提交表单</button>
</form>
<script>
function submitForm(){
    // 先禁用提交按钮，避免重复提交
    document.querySelector('button').disabled = true;
    // 执行表单提交操作
    // 此处省略其他代码
    // 提交成功后跳转到另一个页面
    window.location.href = "http://www.baidu.com";
}
</script>

ログイン後にコピー

上記のコードでは、フォーム送信ボタンのクリックイベントで、まず送信ボタンが無効になり、次にフォーム送信操作が実行されます。フォームが正常に送信されたら、window.location.href を使用して Baidu ホームページにジャンプします。

まとめ

以上、HTMLジャンプに関する手法とテクニックを紹介しましたが、この知識を学びマスターすることで、Webページのジャンプやリダイレクトを簡単に実現することができます。実際の開発では、特定のニーズに応じてさまざまなジャンプ方法を選択する必要があり、セキュリティやページの読み込み速度などの問題に注意を払う必要があります。

以上がHTMLのページにジャンプするにはどうすればいいですか？ヒントの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。