JavaScript でアンカー タグの Href 属性を動的に変更するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-10-26 20:41:29
オリジナル
277 人が閲覧しました

How to Dynamically Change the Href Attribute of an Anchor Tag with JavaScript?

JavaScript によるボタンクリック時のアンカー タグの Href 属性値の変更

アンカーの href 属性の変更 () JavaScript を使用したボタンクリック時のタグ付けは、さまざまな方法で実現できます。以下にいくつかの効果的なアプローチを示します。

空の Href 属性の使用

リロードせずに現在のページの機能を保持するには、空の href 属性をアンカー タグに割り当てます。

<code class="html"><a href="#" onclick="f1()"></a></code>
ログイン後にコピー

スクロールの防止

空の href リンクのデフォルトの動作は、ページを一番上までスクロールすることです。これを防ぐには、「return false;」を追加します。 onclick 関数またはインラインへのステートメント:

<code class="html"><a href="#" onclick="f1(); return false;"></a></code>
ログイン後にコピー

関数から False を返す

onclick 関数内から false を返すこともできます:

<a href="#" onclick="return f1()"></a>

<script>
function f1() {
  // perform actions
  return false;
}
</script>
ログイン後にコピー

控えめな JavaScript アプローチ

より体系的なアプローチの場合は、控えめな JavaScript を使用してアンカー タグを選択し、クリック イベントを個別に処理します。

<a href="#" id="abc"></a>
<a href="#" id="myLink"></a>

<script>
document.getElementById("myLink").onclick = function() {
  document.getElementById("abc").href = "xyz.php";
  return false;
};
</script>
ログイン後にコピー
Byこれらの戦略を実装すると、JavaScript を使用してボタンのクリック時にアンカー タグの href 属性を効果的に変更し、目的の機能を実現し、ブラウザー間での互換性を維持できます。

以上がJavaScript でアンカー タグの Href 属性を動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!