有効な XHTML 1.1 で Div 要素をクリック可能なリンクのように動作させるにはどうすればよいですか?

有効な XHTML 1.1 を使用して Div をクリッカブル リンクに変換する

Div を直接リンクに変換するのではなく、維持しながら同じ機能を実現する簡単な手法があります。有効な XHTML 1.1:

1. div コンテンツを作成します: 通常の CSS テクニックと有効な HTML を使用して、必要に応じて div をデザインします。
2. div: ユーザーがクリックしたときにデフォルトのリンクとして機能するリンクを div 内に配置します。 div.
3. リンク内に空のスパンをネストします: リンク内に、閉じスラッシュのない空のスパン タグ ( ) を挿入します。
4. 位置を割り当てます: div を基準にします: div の位置プロパティを次のように設定します。
5. 空のスパンのスタイルを設定します: 次の CSS を空のスパンに適用します:

{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  z-index: 1;

  /* Fixes overlap error in IE7/8, ensure you have an empty gif */
  background-image: url('empty.gif');
}

これにより、div の上に透明なレイヤーが作成されます。それを完全にカバーします。スパンはリンク内にあるため、クリック可能な領域として動作します。

6. 他のリンクの Z インデックスを調整します (オプション): div 内に追加のリンクがある場合は、デフォルトのスパンの前に表示されるように、position:相対とより高い z-index 値 (例: 2) を割り当てます。 link.

次の手順に従うことで、有効な XHTML 1.1 マークアップを維持しながらリンクとして機能する div を作成し、アクセシビリティと SEO の最適化を確保できます。

以上が有効な XHTML 1.1 で Div 要素をクリック可能なリンクのように動作させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。