jqueryでページにジャンプする方法-jsチュートリアル-php.cn

jqueryでページにジャンプする方法

藏色散人

リリース： 2022-12-30 11:13:04

オリジナル

21929 人が閲覧しました

ページにジャンプする jquery メソッド: 最初に jquery ファイルをページに導入し、次にジャンプをトリガーするボタンを作成し、次にジャンプボタンのクリックイベントを追加し、最後に jquery を通じて location オブジェクトを操作します。、 attr メソッドを呼び出し、新しい URL アドレスに href 属性を割り当てます。

動作環境: Acer S40-51、Windows10 Home中国語版、jquery1.8.3&&HBuilderX.3.0.5

推奨事項:「jqueryビデオ」チュートリアル>>

jqueryジャンプページ

まず、スクリプトライブラリファイルをページに導入する必要があります。

jqueryでページにジャンプする方法

次に、HTML サンプルファイルのテストを作成し、ジャンプをトリガーするボタンを作成します。現在のページは「ページ A」と呼ばれることに注意してください。次に、JS スクリプトロジックを記述して、ジャンプボタンのクリックイベントを追加します。ネイティブ JS では、ジャンプを処理するために window オブジェクトの location 属性を使用することがわかっています。 window.location.href = “abc.html”

jquery を通じて location オブジェクトを操作し、attr メソッドを呼び出し、単に割り当てます。 href 属性を新しい URL アドレスに追加します。

完全なコードをテストします:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h3>这是页面A</h3>
<div>
    <input class="btn btn-primary" type="button" value="跳转">
</div>
<script>
    $(document).ready(function () {
        $(".btn").click(function () {
            $(location).attr("href","testb.html")
        })
         
    })
</script>
</body>
</html>

ログイン後にコピー

ページを実行し、上の [ジャンプ] ボタンをクリックします。

jqueryでページにジャンプする方法

(現在ページ A にいることに注意してください)

クリックすると、新しいページ (testb)

# にジャンプします。

jqueryでページにジャンプする方法

##testb コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>这是页面B</h3>
</body>
</html>

ログイン後にコピー

コンピュータープログラミング関連の知識の詳細については、「

プログラミング教育」を参照してください。！

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