HTML を使用して Button 要素をクリックしてページにジャンプする方法を説明する例

HTML では タグを使用してページにジャンプできますが、ボタンからページにジャンプするにはどうすればよいでしょうか?これには、HTML で タグを使用する必要があります。この記事では、HTMLのButton要素をクリックしてページにジャンプする方法を紹介します。

1. HTML ボタンの基本構文

HTML ボタンを使用してページ ジャンプを実装するには、

タグに onclick 属性を追加する必要があります。

ジャンプするページジャンプを実現するためのJavaScriptコードを入力します。 page

このうち、window.location.href は JavaScript コードの一部であり、ジャンプ先のページの URL アドレスを表します。

2. HTML ボタンのページ ジャンプのサンプル コード

次は、ページ ジャンプを実装する HTML ボタンのサンプル コードです。

<title>HTML Button跳转页面</title>

<button onclick="window.location.href=&#39;https://www.baidu.com/&#39;">前往百度</button>

< /html>

上記のコードでは、「Baidu に移動」ボタンをクリックすると、Baidu の公式 Web サイトにジャンプします。

3. HTML ボタンは相対パス ページにジャンプします

実際の開発では、同じ Web サイト内の他のページにジャンプする必要があることがよくあります。完全な URL アドレスではありません。サンプル コードは次のとおりです。

<title>HTML Button跳转页面</title>

< body>

<button onclick="window.location.href=&#39;about.html&#39;">关于我们</button>

上記のコードでは、「About Us」ボタンをクリックすると、about.html にジャンプします。同じディレクトリのページ。

4. JavaScript を使用して HTML ボタン ジャンプを実装する

onclick 属性に JavaScript コードを直接記述してページ ジャンプを実装するだけでなく、関数を使用してページ ジャンプを実装することもできます。 。サンプル コードは次のとおりです。

<title>HTML Button跳转页面</title>

< body>

<button onclick="goToPage()">跳转页面</button>
<script type="text/javascript">
    function goToPage() {
        window.location.href = "https://www.baidu.com/";
    }
</script>

上記のコードでは、「ページにジャンプ」ボタンがクリックされると、 goToPage という名前の関数が呼び出されます。 . 関数内 ページジャンプを実装します。

5. HTML ボタンは戻る操作と更新操作を実装します

HTML ボタンは、他のページにジャンプするだけでなく、戻る操作と更新操作も実装できます。サンプル コードは次のとおりです。

<title>HTML Button跳转页面</title>

< body>

<button onclick="window.history.back()">返回</button>
<button onclick="window.location.reload()">刷新</button>

上記コードでは「戻る」ボタンをクリックすると前のページに戻りますが、 「更新」ボタンをクリックすると、現在のページが更新されます。

つまり、HTML ボタンは、ページのジャンプ、戻る、更新などの機能を実現するための重要な要素の 1 つです。 HTML ボタンの基本的な構文と関連知識をマスターすることで、さまざまな操作を簡単に実装し、Web 開発に便利なツールを提供できます。

以上がHTML を使用して Button 要素をクリックしてページにジャンプする方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。