[HTML]Ẩn hiện nội dung bằng HTML5

Đánh giá: 100%

Có

100/ 100 100 bình chọn

QuocKun
Cấp bậc: mem

Nó có tác dụng rút gọn nội dung đc ẩn trong 1 cú click như menu mà thông thường ta phải dùng js mới lm đc. Ví dụ:

<details><summary>hiện cái coi</summary>đây là nội dung đc ẩn trong đó</details>

Copy code

Các bạn cứ dán và test là để hiểu rõ hơn về nó Nếu các bạn chỉ hướng đến adr trở lên còn mấy trình duyệt ko hỗ trợ thì nó cứ show ra thì chỉ cần như trên là đc. ( wap mình chỉ ngang đây thôi!) Còn Để 2 thẻ này hoạt động tốt trên các trình duyệt chúng ta cần phải thêm đoạn jquery sau:

Copy code

Copy code

Và để đẹp mắt và hỗ trợ tốt trình duyệt tốt hơn cho mấy cái trình ko hỗ trợ thì chèn thêm đoạn css sau vào:

#wrapper { margin: auto } summary { cursor: pointer;color:# mã màu của bạn } /* Mặc định thì nội dụng nằm bên trong thẻ<detail>sẽ được ẩn */ /* Đoạn code này chỉ hỗ trợ cho các trình duyệt không hỗ trợ thẻ<detail>và<summary>*/ .no-details details>* { display: none; } /* Không hoạt động tốt trên Firefox 3.6.x */ /* .no-details details[open]>* { display: block; } */ /* Không hoạt động trên IE8 */ .no-details details>summary:before { float: left; width: 20px; content: '► '; } .no-details details.open>summary:before { content: '▼ '; } /* For IE6 and IE7,*/ .no-details details>summary { padding-left: 20px; background: url( link ảnh thay) no-repeat 0 0; } .no-details details.open>summary { background-position: 0 -20px; }

Copy code

Để hỗ trợ chạy trên IE8 trở về trước thì chúng ta cần phải thêm đoạn code sau ngay sau thẻ head

Copy code

Hy vọng với bài viết này các bạn có thể hiểu rõ hơn và biết cách sử dụng 2 thẻ details và summary ..

Nguồn : Kusdinks

Tổng số: 1

Chia sẻ:

BBCode:

Link:

Từ khóa: hiện , [HTML]Ẩn , hiện , bằng , bằng , dung

Trực tuyến

BOT , 1 khách ghé thăm

Ping sitemap|Robots.txt|Sitemap.Xml

Lamborghini Huracán LP 610-4 t