JavaScriptを使用せずに「div」をクリック可能にする方法は?

JavaScript を使用せずにクリック可能な 'div' を作成する

'div' 要素をクリック可能にするには JavaScript を使用することがよくありますが、HTML と CSS も使用されます。スクリプトを使用せずにこの効果を実現できるテクニック。そのような方法の 1 つは、次のコードに示すように、アンカー タグ内で「div」を囲むことです。

<a href="#">
    <div>This is a link</div>
</a>

ただし、HTML バリデーターは、インライン要素内にブロック要素 (「div」など) を配置しないように警告します。 (「a」のように)。より良いアプローチは、リンク (アンカー タグ) が「div」全体を埋める CSS ルールを作成することです:

CSS:

#my-div {
    background-color: red;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML:

<div>

この手法では、HTML と CSS を組み合わせて、JavaScript の必要性を回避するクリック可能な「div」を作成します。 「div」をアンカータグで囲み、「a」要素を「div」の寸法に埋めるCSSを適用すると、「div」全体がクリック可能なリンクになります。

以上がJavaScriptを使用せずに「div」をクリック可能にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。