Home » Thủ thuật blog
Thủ thuật tạo trang FAQ : Nhảy tới phần trả lời tương ứng khi click vào 1 câu hỏi
Thứ Ba, 23 tháng 6, 2009
[FD's BlOg] - Thủ thuật này sẽ hỗ trợ các bạn thực hiện 1 trang FAQ (Frequently Asked Questions - Các câu hỏi thường gặp) trông pro hơn với việc nhảy đến câu trả lời của câu hỏi đó khi bạn click chuột vào. Thủ thuật này không phải là mới, tuy nhiên chưa có ai phổ biến, và nhân tiện có người hỏi về vấn đề này nên mình post bài hướng dẫn luôn.
Thực ra thủ thuật này rất đơn giản, ko hề sử dụng CSS hay JS mà chỉ đơn thuần là HTML.
Các bạn có thể xem demo ở đây: http://fandung.110mb.com/test/test_FAQ.html
Hình ảnh minh họa:

Trong hình mình có giới thiệu 2 cách, 1 là các bạn có thể tạo 1 dòng phân trang (dạng Page Navbar) rồi click vào, 2 là nhấp thẳng vào câu hỏi để đến với câu trả lời.
☼ Và đây là code của thủ thuật:
//Dạng hiển thị theo cách 1
Câu <a href="#Cau1">1</a> | <a href="#Cau2">2</a> | <a href="#Cau3">3</a> | <a href="#Cau4">4</a>
//Dạng hiển thị theo cách 2
<a href="#Cau1"> 1</a>
<a href="#Cau2"> 2</a>
<a href="#Cau3"> 3</a>
<a href="#Cau4"> 4</a>
//Nội dung
<a name="Cau1"></a>Tiêu đề câu 1
{Nội dung trả lời câu hỏi 1}
<a name="Cau2"></a>Tiêu đề câu 2
{Nội dung trả lời câu hỏi 2}
<a name="Cau3"></a>Tiêu đề câu 3
{Nội dung trả lời câu hỏi 3}
<a name="Cau4"></a>Tiêu đề câu 4
{Nội dung trả lời câu hỏi 4}
- Ta để ý sẽ thấy, muốn nhảy tới vị trí định sẵn khi click vào link của câu 1 thì ta chỉ cần thêm thẻ <a name="Cau1"></a> trước nội dung của câu 1.
- Lưu ý: bỏ phần chú thích khi thực hiện
Chúc các bạn thành công.

- Feedburner Google và cách lấy tùy chỉnh cho blogspot
- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
Comments[ 0 ]
Đăng nhận xét