Ẩn và hiện div trong HTML thực sự đơn giản. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thực hiện điều đó chỉ bằng CSS. Tôi cũng sẽ chỉ cho bạn một phiên bản ẩn và hiển thị div khác bằng cách sử dụng jQuery. Hơn nữa, chúng tôi sẽ thực hiện các biện pháp phòng ngừa cần thiết nếu Javascript bị tắt. Hãy đi sâu vào
Ẩn và hiển thị div bằng CSS
Phương pháp đầu tiên, chỉ liên quan đến việc sử dụng CSS. Chúng tôi sẽ sử dụng lớp giả CSS
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
Xem Bản trình diễn →
Mã HTML
Đầu tiên chúng ta cần thêm HTML. Chúng tôi tạo một div,
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
Subscribe to this website
Mã CSS
Tiếp theo chúng ta phải thêm một số CSS. Theo mặc định, các phần tử sẽ bị ẩn là. a] biểu mẫu và b] div bên trong [một khi. đăng ký div được di chuột]. Để tác động đến một cái gì đó bằng CSS, bạn thêm “ > ” vào cuối lớp, nghĩa là bạn nhắm mục tiêu con cháu của lớp đó. Ví dụ.
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
Đó là tất cả những gì bạn cần để thực hiện công việc này. Bây giờ nó thuộc về bạn;
Ẩn và hiển thị div bằng JavaScript
Trong ví dụ thứ hai này, chúng tôi ẩn và hiển thị div bằng thư viện JavaScript, được gọi là jQuery. Lần này, chúng tôi sẽ không ẩn div khi nó được di chuột nhưng khi nó được nhấp vào. Theo mặc định, các div sẽ bị ẩn; . Ngoài ra, chúng tôi muốn mỗi div “độc lập” với nhau. Có nghĩa là, nếu tôi nhấp vào div đầu tiên để xem nội dung của nó, các div khác sẽ vẫn bị ẩn
Xem Bản trình diễn →
Mã HTML
Để làm việc này, chúng tôi sẽ thêm hai div, cái này bên trong cái kia. Div bên ngoài sẽ luôn được hiển thị, cùng với tiêu đề được bao bọc bên trong tiêu đề h3. Div bên trong sẽ bị ẩn theo mặc định và khi nhấp vào div bên ngoài, div bên trong sẽ được hiển thị. Vui lòng thay đổi mã theo nhu cầu của bạn. Ví dụ: bạn có thể ẩn hoàn toàn các div sau khi chúng được nhấp hoặc bạn có thể thêm một nút để ẩn chúng
This is a third title...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit, eros id adipiscing congue, lorem ante sagittis elit, id malesuada nibh est sed orci
Mã CSS
Trong CSS, chúng tôi sẽ thêm hai lớp. Một lớp có tên là
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
Mã JavaScript
Cho đến bây giờ, không có gì xảy ra. Các div vẫn hiển thị và khi bạn nhấp vào chúng, không có gì xảy ra. Vì một mục đích tốt; . Bạn phải luôn sử dụng JavaScript như một công cụ nâng cao và cải thiện trải nghiệm duyệt web chứ không làm suy giảm nó
Bây giờ, bên trong JavaScript, chúng tôi sẽ ẩn các div sau khi tải xong tài liệu. Đây sẽ là trạng thái mặc định của chúng tôi. Chúng tôi ẩn các div bằng cách thêm một lớp CSS có tên là hidden vào div bên ngoài có tên là
This is a third title...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit, eros id adipiscing congue, lorem ante sagittis elit, id malesuada nibh est sed orci
Khi người dùng đã nhấp vào div, chúng tôi sẽ kiểm tra xem div có lớp ẩn hay không, sau đó chúng tôi xóa nó và thêm lớp hiển thị sẽ hiển thị div bên trong. Nếu nó không có lớp ẩn thì điều đó có nghĩa là div bên trong hiển thị; . Đừng quên gọi jQuery trước khi thêm đoạn script sau
form, .subscribe:hover>div {
display: none;
}
.subscribe:hover>form {
display: block;
}
Phần kết luận
Bạn thấy việc ẩn và hiển thị div đơn giản như thế nào không? . Theo cùng một mẫu mã này, bạn có thể thao tác trực tiếp các giá trị CSS từ bên trong JavaScript mà không cần thêm lớp
Bạn có thể thay đổi nhiều giá trị CSS, ví dụ đoạn mã JS dưới đây sẽ ẩn phần tử
This is a third title...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit, eros id adipiscing congue, lorem ante sagittis elit, id malesuada nibh est sed orci