23 tháng 6, 2012

tạo box - Tạo button cho phép bạn ẩn/hiện nội dung

Tạo button cho phép bạn ẩn/hiện nội dung

Fairstar | 05-08-2011 | nhận xét (3)
Tạo button cho phép bạn ẩn/hiện nội dung
Bài viết của bạn sẽ trở nên sinh động và lôi quấn bạn đọc hơn nếu nó được gắn thêm Button cho phép ẩn hiện một phần nội dung khi bạn Click chuột vào nó. Thủ thuật này đã được mình áp dụng trong các trang phim của mình các bạn có thể xem đemo ở đây: hoặc ấn vào Button ở bên dưới để xem thử
Demo
Code:
Phần nội dung hiển thị
<div>
<div>
<input type="button" value="Xem"
 style="width:75px;font-size:10px;margin:0px;padding:0px;" onclick="if 
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
 != '') { 
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
 = '';this.innerText = ''; this.value = 'Ẩn';
 } else { 
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
 = 'none'; this.innerText = ''; this.value = 'Xem'; }">
</div>
<div>
<div style="display: none;">
{Phần nội dung bị ẩn}
</div>
</div>
</div>
- Khi các bạn muốn áp dụng cho bài viết của mình thì cứ việc thay thế dòng {phần nội dung bị ẩn} thành nội dung bài viết của bạn là xong.
- Nếu bạn muốn tạo nhiều nút Ẩn/Hiện trong bài viết của mình thì cứ làm tương tự.

Chúc các bạn thành công.

0 nhận xét:

Đăng nhận xét

Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn kynangblog.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. KỸ NĂNG BLOG - All Rights Reserved
Design by KyNangBlog Edit Ky nang blog
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million kynangblog template byKyNangBlog
Blogger Gadgets