ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript を使わずに Div 全体をクリックできるようにするにはどうすればよいですか?

JavaScript を使わずに Div 全体をクリックできるようにするにはどうすればよいですか?

DDD
リリース: 2024-11-09 19:37:02
オリジナル
501 人が閲覧しました

How to Make an Entire Div Clickable Without JavaScript?

HTML と CSS を使用して 'div' 全体をクリック可能にする

JavaScript を使用せずに 'div' 全体をクリック可能にする解決策を探します。 「a」タグ内で「div」をラップすることは実行可能なオプションのように思えるかもしれませんが、HTML 検証に関する懸念が生じます。より準拠したアプローチは次のとおりです。

Fill-Div リンクの使用

「div」内にリンクを作成し、「div」領域全体を埋めるようにスタイルを設定します。これにより、「div」自体がクリック可能であるかのような錯覚を与えます。

CSS:

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
ログイン後にコピー

HTML:

<div>
ログイン後にコピー

リンクをブロック要素にし、その高さと幅を 100% に設定すると、「div」スペース全体がカバーされます。クリックすると、リンクは指定されたページにリダイレクトされ、「div」をクリック可能に表示されます。

以上がJavaScript を使わずに Div 全体をクリックできるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート