html クリックするとページにジャンプします

HTML は、Web ページを構築するための中心的な言語の 1 つであり、さまざまな要素をページに追加して、豊かなページ インタラクション効果を実現できます。その中でも、クリックしてページにジャンプすることは非常に一般的なインタラクション方法であり、さまざまな Web サイトやアプリケーションで広く使用されています。

HTML では、クリックしてページへのジャンプを実現するさまざまな方法があり、以下で 1 つずつ紹介します。

1. ハイパーリンクを使用する

最も一般的なクリック ジャンプは、ページ上の特定のテキストを変更できるハイパーリンクタグを使用することです。画像はリンクに変換され、クリックすると指定したページにジャンプします。

構文は次のとおりです。

<a href="目标页面地址">链接文本</a>

このうち、href は指定されたリンク ターゲット アドレスであり、絶対アドレス (http://example など) を指定できます。 .com)、相対アドレス (/about.html など)、または JavaScript 関数呼び出し (javascript:void(0) など) です。 リンク テキスト は、ページ上に表示されるクリック可能なテキストまたは画像です。

たとえば、ページにリンクを追加し、クリックすると Baidu Web サイトにジャンプします。

<a href="https://www.baidu.com/">去百度网站逛逛</a>

これにより、ページ上にハイパーリンクが作成され、クリックされると、 Baidu. の Web サイトにジャンプします。もう 1 つ注意すべき点は、href 属性が空の場合、リンクをクリックすると現在のページが更新されることです。

2. JavaScript 関数の使用

ハイパーリンク タグの使用に加えて、JavaScript 関数を使用してクリック ジャンプを実現することもできます。たとえば、ページ上にボタンを実装し、クリック後に指定したページにジャンプしたい場合は、次のコードを使用できます。

<button onclick="window.location.href='目标页面地址'">跳转到目标页面</button>

このうち、onclick がトリガーです。ボタンクリックイベントの関数。ボタンがクリックされると、括弧内の JavaScript コードが実行されます。 window.location.href は JavaScript の組み込みオブジェクトで、現在のページの URL アドレスを表します。このオブジェクトの値を変更することで、現在のページから指定したページにジャンプできます。

たとえば、クリック後に Baidu Web サイトにジャンプするボタンを作成したいとします。

<button onclick="window.location.href='https://www.baidu.com/'">去百度网站逛逛</button>

これにより、クリック後に Baidu Web サイトにジャンプするボタンが作成されます。

3. フォーム送信の使用

HTML では、ユーザーがデータを入力し、指定されたサーバーに送信して処理するためにフォームを使用できます。ただし、フォームの送信アドレスをターゲット ページ アドレスとして設定すると、ユーザーが送信ボタンをクリックするとターゲット ページにジャンプするようになります。

構文は次のとおりです。

<form action="目标页面地址">
  <!-- 表单元素 -->
  <input type="submit" value="提交">
</form>

このうち、action 属性はフォームの送信先のターゲット ページ アドレスを指定し、type= input 要素の "submit" は、これが送信ボタンであることを示します。

たとえば、ページにフォームを追加したいとします。ユーザーがデータを入力した後、送信ボタンをクリックして Baidu Web サイトにジャンプします:

<form action="https://www.baidu.com/">
  <input type="text" name="query" placeholder="请输入要搜索的内容">
  <input type="submit" value="搜索">
</form>

このように、フォームが作成され、入力後に検索する必要があります。 コンテンツを選択した後、送信ボタンをクリックすると、Baidu の Web サイトにジャンプして検索できます。

概要

上記は、HTML でクリックしてページに移動するための 3 つの方法です。ハイパーリンク タグ、JavaScript 関数、およびフォーム送信を使用します。特定の用途では、実際のニーズに応じて適切な方法を選択できます。ページにジャンプするときは、ユーザー エクスペリエンスとページの効果を向上させるために、ユーザーフレンドリーなプロンプトと適切なジャンプ方法を提供する必要があることに注意してください。

以上がhtml クリックするとページにジャンプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。