Bagaimana untuk Membuat 'div' Boleh Diklik Tanpa Menggunakan JavaScript?

Mary-Kate Olsen
Lepaskan: 2024-11-09 19:55:02
asal
788 orang telah melayarinya

How to Make a 'div' Clickable Without Using JavaScript?

Mencipta 'div' Boleh Klik Tanpa JavaScript

Menjadikan elemen 'div' boleh diklik selalunya melibatkan penggunaan JavaScript, tetapi terdapat HTML dan CSS teknik yang boleh mencapai kesan ini tanpa skrip. Salah satu kaedah sedemikian ialah untuk menyertakan 'div' dalam teg anchor, seperti yang dilihat dalam kod berikut:

<a href="#">
    <div>This is a link</div>
</a>
Salin selepas log masuk

Walau bagaimanapun, pengesah HTML memberi amaran agar tidak meletakkan elemen blok (seperti 'div') dalam elemen sebaris (seperti 'a'). Pendekatan yang lebih baik ialah mencipta peraturan CSS yang menjadikan pautan (tag anchor) mengisi keseluruhan 'div':

CSS:

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

HTML:

<div>
Salin selepas log masuk

Teknik ini menggunakan gabungan HTML dan CSS untuk mencipta 'div' boleh klik yang mengelakkan keperluan untuk JavaScript. Dengan melampirkan 'div' dalam teg anchor dan menggunakan CSS yang mengisi elemen 'a' pada dimensi 'div', keseluruhan 'div' menjadi pautan yang boleh diklik.

Atas ialah kandungan terperinci Bagaimana untuk Membuat 'div' Boleh Diklik Tanpa Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan