ホームページ > ウェブフロントエンド > フロントエンドQ&A > ボタンをクリックしてページにジャンプする機能をjqueryで実装する方法

ボタンをクリックしてページにジャンプする機能をjqueryで実装する方法

PHPz
リリース: 2023-04-10 09:52:52
オリジナル
1782 人が閲覧しました

Web サイト開発では、ページにジャンプするためにボタンが必要になるシナリオがよくあります。今回はjQueryを使ってボタンをクリックしてページにジャンプする機能を実装する方法についてお話します。

まず、HTML ファイルの先頭に jQuery ライブラリを追加します。コードは次のとおりです:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
ログイン後にコピー

ここでは、jQuery ライブラリの CDN (Content Delivery Network) アドレスを使用します。これを行うと、ページの読み込みが高速化されます。

次に、HTML コード スニペットを記述する必要があります。コードは次のとおりです。

<button id="myButton">点击跳转到百度</button>
ログイン後にコピー

ここでは、myButton の ID を持つボタンを作成し、ボタンにテキストの説明を追加します。百度にジャンプしてください。」

ボタンを作成したので、ボタンがクリックされたときにジャンプ操作を実行する必要があります。 jQuery を使用してボタンのクリック イベントをリッスンし、クリック イベントが発生したときにジャンプ操作を実行する必要があります。コードは次のとおりです。

<script type="text/javascript">
    $(function(){
        $('#myButton').click(function(){
            window.location.href = 'https://www.baidu.com';
        });
    });
</script>
ログイン後にコピー

コードでは、jQuery のコア メソッドである click() を使用して、ボタンのクリック イベントをリッスンします。ボタンをクリックするとコールバック関数が実行され、関数内の window.location.href = 'https://www.baidu.com' を使用してジャンプ操作を実装し、現在のページを Baidu Web サイトにジャンプします。

最後に、すべてのコードを統合しました。コードは次のとおりです。




    
    jQuery 实现点击按钮页面跳转
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>



    <button id="myButton">点击跳转到百度</button>

    


ログイン後にコピー

このようにして、ボタンをクリックしてページにジャンプする機能を jQuery を使用して実装することに成功しました。上記のコードは単なる例であり、実際の開発ではプロジェクトの要件に応じて変更および拡張する必要があることに注意してください。

以上がボタンをクリックしてページにジャンプする機能をjqueryで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート