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

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

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

空の Href 属性の使用

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

<code class="html">&lt;a href=&quot;#&quot; onclick=&quot;f1()&quot;&gt;&lt;/a&gt;</code>

スクロールの防止

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

<code class="html">&lt;a href=&quot;#&quot; onclick=&quot;f1(); return false;&quot;&gt;&lt;/a&gt;</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 サイトの他の関連記事を参照してください。