HTMLでボタンタグをクリックし、ページジャンプを実現する3つの方法
2022-01-25 07:05:25
方法1:onclickイベントを使用する
<input type="button" value="button"
onclick="javascrtpt:window.location.href='http://www.baidu.com/'" />
または、ボタンタグを使用します。
<button onclick="window.location.href = 'https://www.baidu.com/'">Baidu</button>
方法2:ボタンタグをaタグで囲む
<a href="http://www.baidu.com/">
<button>Baidu</button>
</a>
または
<a href="http://www.baidu.com/"><input type="button" value='Baidu'></a>
方法3:JavaScriptの関数を使用する
<script>
function jump(){
window.location.href="http://www.baidu.com/";
}
</script>
<input type="button" value="Baidu" onclick=javascrtpt:jump() />
// or<input type="button" value="Baidu" onclick="jump()" />
// or<button onclick="jump()">Baidu</button>
概要
以上、HTMLのボタンタグのクリックでページジャンプの3つの方法を実現する方法を少し紹介しましたが、お役に立てれば幸いです。もし何か質問があれば、私にメッセージをください。これからもスクリプトハウスのウェブサイトをよろしくお願いします。
この記事がお役に立つと思われる方は、ご自由に転載してください!出典を明記してください!ありがとうございました。
関連
-
html-webpack-pluginの使用方法について説明します。
-
詳細 HTMLフォントはline-heightを使用して、まだ垂直方向の中央に配置することができません解決策
-
html フォーム入力で無効化されたソリューションを使用した後、フォームの値を取得することができない
-
入力が遅い、ラグがある場合のクイックソリューション[type=file]オープニング
-
HTMLのプログラミングマークアップと文書構造の説明
-
html doctypeの役割の紹介
-
HTMLドロップダウンボックスのSELECTオプションを変更するさまざまな方法
-
HTML 相対パス・絶対パス徹底理解講座
-
IE6で画像要素imgに余分な空白がある
-
IE6が最も使われている理由
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLドラッグ&ドロップコード
-
htmlウェブページの基本コンセプトの分析
-
border-radius は、要素に丸みを帯びたボーダーを追加する方法です。
-
IE、Firefox、Chromeの各ブラウザでスペースが不規則に表示される。
-
iframeのテクニックを使って、訪問者にqqの実装アイデアとサンプルコードを提供する。
-
入力におけるid属性とname属性の違いの例
-
柔軟で安定した高品質のHTMLとCSSコード仕様の書き方ガイド
-
html body タグと html common control タグ
-
iframe を使用せずに html を入れ子にした div
-
すべてのブラウザに完全対応したselectを作成するためのベストプリセット