Pro page

10
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn Minh Triết (coitre.blogspot.com)
[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.


Enter your mail address:

10

24/6/
6/09
02:38
Lý Minh Triết

Cảm ơn bạn.. bạn trả lời nhanh quá... :)

24/6/
6/09
02:53
Lý Minh Triết 2

Hiện tại blog coitre của mình đang có vấn đề... bạn có thể giúp mình khắc phục lỗi đó được kg? Thiệt tình là tìm hoài mà không biết làm sao khắc phục được lỗi dạng này...
Mình đã viết về lỗi này ở đây.
http://coitre.blogspot.com/2009/06/loi.html

30/6/
6/09
00:21
Pig 3

a Dũng à, e muốn hỏi a phát :
gần đei e phát hiện ra trong mỗi bài viết của e, sau khi post 1 comment lên thì lập tức toàn entry sẽ bị biến mất :-?? chỉ hiện ra mỗi comment vừa gửi, như thế là bị làm sao hả a? có phải e xóa mất cái ji à, sửa như nào bi h

giúp e nhé ;)
thks a trước

30/6/
6/09
15:04
fandung 4

@Pika Rock : em thử xem trong phần code còn thẻ comment-block ko?

Hoặc coi lại xem em có lỡ làm ẩn cái gì đó liên quan tới phần comment-block ko?

30/6/
6/09
18:51
Pig 5

vẫn còn đủ a ạ,
/*
dl id='comments-block'dl class='comments-block...
*/

cụ thể là :
vd cái entry của e ở
http://.....
vẫn đang hiện bình thường. sau khi post comment thì địa chỉ đó có dạng
http://.....html?showComment=1246234831982#c

thì chỉ hiện comment mà ko hiện bài viết :-??

25/11
1/10
21:49
Gain Capital 6

Thanks so much
http://patternstrader.blogspot.com/

2/7/1
7/11
12:15
No Crazy 7

~x( không khoái món này lém hjhj

8/11/
1/12
05:21
Unknown 8
8/11/
1/12
05:24
Unknown 9

Mình thấy code này tiện dụng để là Link trích ngang cho một nhãn riêng biệt,vừa dễ tìm đến Liên kết của bài viết chung một chủ đề,nhưng bạn không hướng dẫn rõ cách làm thế nào để đưa Link của bài viết vào theo từng câu hỏi?Cũng không thấy bạn chỉ dẫn đưa code vào đâu để thực hiện việc này như ở những bài viết khác,trình độ hiểu biết Code mình rất yếu chỉ học lóm qua mọi người,nên cứ phải mò mẫm,nhiều khi thấy bài viết đúng ý mình nhưng làm hoài không được nên đành phải bỏ cuộc.Khổ thế đấy...

19/1/
1/22
17:30
BacBuu 10

Bạn owi mình muốn Load nội dung trang tương ứng khi click vào menu thì phải làm sao. bạn giúp mình với



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons

Newer Posts Older Posts Home