Blogspot: Cách làm Tab Views

Blogspot: Cách làm Tab Views


Tab Views nhằm biểu diễn nhiều thông tin ở dạng thu gọn về 1 chỗ, cho phép ta tiết kiệm được kha khá space của trang web để hiển thị các thứ khác. Với từ khóa "tab views" bạn có thể tìm ra hàng đống code hỗ trợ việc này. Tuy nhiên hầu hết họ không hỗ trợ "bộ nhớ" cho tabviews của mình. Tức là Tab mặc định luôn luôn chết một chỗ khi ta chuyển trang mặc dù trước đó ta đã chọn tab không mặc định. Lấy thí dụ bạn có 3 tab: Tab1, Tab2. Tab3. Tab1 là mặc định (tức là nó được chọn trước). Bạn mở Tab2, sau đó bấm vào 1 link trong Tab2, khi trang mới mở ra thì Tab được chọn lại quay về Tab1. Tức là nó chưa nhớ được rằng trước đó ta đã chọn Tab2. Tuy nhiên nếu bạn sử dụng code tab views ở đây thì hoàn toàn có hỗ trợ bộ nhớ đó, bởi vì tôi đã cài vào rồi

. Chèn đoạn CODE 1 sau vào giữa 2 thẻ và

CODE 1:





Hãy điều chỉnh style theo ý thích của mình. Nếu bạn không biết css mà vẫn chưa hài lòng với style mặc định trên thì có thể đặt comment trong này tôi sẽ giải đáp cho bạn.

Ví dụ đoạn style mặc định trên sẽ cho kết quả là: Click Here

2. Tiếp theo là tạo mã HTML cho phần hiển thị tab. Xong rồi chèn code tạo được vào chỗ muốn hiển thị. Cấu trúc như sau:

CODE 2:

Tab 1
Tab 2
Tab 3

HTML nội dung Tab 1

HTML nội dung Tab 2

HTML nội dung Tab 3

Vậy là xong rồi đó. Hãy tạo một tabs views thật đẹp và tận hưởng cảm giác sung sướng nhé. Chắc bạn cũng thấy mọi việc hết sức đơn giản phải không. Hãy tập thực hành và khám phá nhiều cái hay nữa nhé, chắn chắn bạn sẽ rất mau am hiểu về w3c