Chỉ hiện/ẩn div CSS
|
Đây là ví dụ mã có thể được sử dụng để hiển thị div khi hộp kiểm được chọn và ẩn div khi hộp kiểm không được chọn. Chúng tôi đang triển khai chức năng này chỉ bằng CSS Show Sao chép mã ____0 Mã CSS có thể được sử dụng để hiển thị/ẩn div khi chọn/bỏ chọn hộp kiểm. chúng tôi đang sử dụng lớp giả. đã chọn được áp dụng trên hộp kiểm để kiểm tra xem hộp kiểm có được chọn hay không và sử dụng + từ khóa, chúng tôi đang chọn phần tử HTML tiếp theo của hộp kiểm loại đầu vào là div Tôi đã xem qua trang này. http. //photoshopworld. com/schedule/ trong đó khi nhấp vào tiêu đề của một lớp (in đậm), mô tả trong div sẽ hiển thị. Nếu nhấp lại, mô tả sẽ bị ẩn. Với javascript, điều này rất dễ thực hiện. Nhưng tôi không thấy bất kỳ chức năng javascript nào được gọi khi xem nguồn trang. Chức năng ẩn/hiển thị dường như chỉ được thực hiện bằng css. Có ai biết làm thế nào điều này được thực hiện? ngày 7 tháng 9 năm 2011 lúc 3. 21 giờ tối #86615
người tham gia Điều gì về nút xuyên tâm mà Chris đã làm để chuyển đổi các tab? ngày 8 tháng 9 năm 2011 lúc 1. 34 giờ chiều #86687
Hội viên Wolfcry & Paulie, Bạn đúng là có rất nhiều javascript trên trang này. Tắt javascript bấm vào tiêu đề không hiện mô tả nữa. Có vẻ như javascript cung cấp tính năng này. Tuy nhiên, nếu bạn xem mã nguồn html như ví dụ bên dưới Mở đăng ký hội thảo trước hội nghịHội thảo trước hội nghị tùy chọn không có sự kiện javascript onclick nào được liên kết với tiêu đề “Đăng ký hội thảo trước hội nghị”. Đó là lý do tại sao ban đầu tôi nghĩ css cung cấp tính năng nhấp để hiển thị mô tả. Bạn có biết làm thế nào điều này được thực hiện? Cảm ơn, ngày 8 tháng 9 năm 2011 lúc 9. 47 giờ chiều #86726
Hội viên Bạn có thể làm điều gì đó tương tự bằng cách sử dụng. tiêu điểm http. //jsfiddle. ròng/ce6Fe/ Nó sẽ không ẩn cho đến khi bạn nhấp chuột, nhưng nó hoạt động mà không cần JavaScript. Tất nhiên, các phần tử cấp khối không hợp lệ trong phần tử neo, trừ khi bạn đang sử dụng HTML 5 Mỗi phần tử HTML có một giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó là gì. Giá trị hiển thị mặc định cho hầu hết các phần tử là .expando {
display: none;
}
.expando:target {
display: block;
}
0Nhấp để hiển thị bảng điều khiển Bảng điều khiển này chứa một phần tử, được ẩn theo mặc định ( .expando {
display: none;
}
.expando:target {
display: block;
}
1)Nó được tạo kiểu bằng CSS và chúng tôi sử dụng JavaScript để hiển thị nó (đổi nó thành ( .expando {
display: none;
}
.expando:target {
display: block;
}
2)Phần tử cấp khốiPhần tử cấp khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (kéo dài sang trái và phải hết mức có thể) Các phần tử là phần tử cấp khối Ví dụ về các phần tử cấp khối
Yếu tố nội tuyếnPhần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết Đây là phần tử nội tuyến bên trong một đoạn văn. Ví dụ về các yếu tố nội tuyến Trưng bày. không ai;.expando {
display: none;
}
.expando:target {
display: block;
}
3 thường được sử dụng với JavaScript để ẩn và hiển thị các phần tử mà không xóa và tạo lại chúng. Hãy xem ví dụ cuối cùng của chúng tôi trên trang này nếu bạn muốn biết làm thế nào để đạt được điều này Có nhiều cách để ẩn và hiện nội dung bằng một cú nhấp chuột (hoặc chạm hoặc chọc hoặc nhấn phím hoặc…). Nhiều người trong số họ có JavaScript ẩn bên trong và gần như tất cả họ đều phụ thuộc vào thư viện và/hoặc CDN của bên thứ ba. Điều này có thể ổn khi bạn đã phải tải một đống tập lệnh trên một trang. Điều này cũng có thể dẫn đến thực tiễn phát triển kém Bạn có thể giảm thiểu lỗi JavaScript đó bằng một chút cải tiến lũy tiến chỉ dành cho CSS. Nếu bạn dựa vào bộ chọn .expando {
display: none;
}
.expando:target {
display: block;
}
4, bạn chỉ cần hai dòng CSS cho tính năng hiển thị/ẩn cơ bản nhất.expando {
display: none;
}
.expando:target {
display: block;
}
Tôi đã làm một mẫu để hiển thị nó trong thực tế Xem Pen Show/Hide Script-Free của Adrian Roselli (@aardrian) trên CodePen Hỗ trợ các trình duyệt cũ không biết phải làm gì với .expando {
display: none;
}
.expando:target {
display: block;
}
4 có thể đơn giản như gói CSS trong truy vấn phương tiện hoặc sử dụng nhận xét có điều kiện (đối với Internet Explorer cũ)Từ đây, bạn có thể tạo lớp cho tất cả các hiệu ứng hoạt hình JavaScript tiện lợi, các ràng buộc chính, v.v. Điều gì đã thúc đẩy bài đăng này?Tôi đã ở W3C để tìm kiếm tất cả các thông số kỹ thuật liên quan đến khả năng truy cập. Tôi đã xem danh sách các nhóm thông số kỹ thuật, thấy dòng chữ màu xanh nghĩa là tôi có thể nhấp vào (phần gạch dưới được áp dụng không nhất quán, vì vậy chúng không phải là đầu mối nhất quán) và điều gì đó sẽ xảy ra, nhưng không thể đi đến đâu Một nguồn xem nhanh cho tôi thấy rằng đó không phải là liên kết hay nút (không có .expando {
display: none;
}
.expando:target {
display: block;
}
6 và không có .expando {
display: none;
}
.expando:target {
display: block;
}
7). Kiểm tra bảng điều khiển tôi thấy lỗi sau. .expando {
display: none;
}
.expando:target {
display: block;
}
8Tập lệnh bị lỗi và do .expando {
display: none;
}
.expando:target {
display: block;
}
6 được thêm vào sau khi trang được phân phát, nên lỗi đã ngăn không cho thêm bất kỳ điều khiển nào, khiến nội dung tôi muốn không có sẵn. HTML thô trông như thế này
|
