Tạo Tab Nội Dung đơn giản với HTML, CSS, jQuery
Lời đầu tiên thì xin độc giả thứ lỗi vì đã quá lâu rồi không đăng bài mới, để blog trống không lâu quá chắc nhiều người cũng quên mất mình luôn rồi. Đối với những độc giả thường xuyên của blog mình, về tương lai mình sẽ có gắng sắp xếp thời gian tiếp tục với các bài viết hướng dẫn mọi người về Blogger, lập trình, marketing, adsense,... cũng như giải đáp thắc mắc nhiều hơn cho mọi người nhé.
Chủ đề chính là gần đây có bạn hỏi mình về cách phân trang bài viết cho Blogspot. Thế tiện thể đây mình làm một bài hướng dẫn về vấn đề này. Thực chất thì thủ thuật này có tên gọi là Tab Nội Dung (Tabbed Content) rất nhiều trên mạng, đủ cách làm Javascript, jQuery ngay cả CSS3 không cũng làm được nữa. Và không chỉ dành riêng cho Blogspot mà bất cứ mã nguồn nào hỗ trợ những ngôn ngữ làm web cơ bản.
Bài viết này chúng ta sẽ cùng nhau làm các Tab mà trong mỗi Tab là những phần nội dung của chúng ta. Việc phân chia nội dung theo Tab có nghĩa là sao, toàn bộ phần nội dung sẽ không được hiển thị mà sẽ được chia ra từng phần nhỏ nằm trong từng Tab. Khi người dùng chọn vào một Tab bất kì thì website sẽ hiển thị lên nội dung tương ứng. Chúng ta bắt đầu vào làm nó nhé, lần này mình sẽ hướng dẫn bằng jQuery, bạn nào thích mình hướng dẫn bên CSS3 thì có thể cho mình biết nhé.
DEMO
Cấu trúc HTML bao gồm chỉ thẻ ul và li. Nhìn sơ qua thì mình chắc mọi người cũng có thể đoán được là thẻ ul có class là tabs dùng để chứa các thẻ li là các Tab mà người dùng sẽ nhắp chọn. Còn thẻ ul có class là tab chứa nội dung tương ứng với các tab đó.
Thế làm sao mà nó biết được nội dung nào tương ứng để thêm class active để hiển thị phần nội dung đó lên? Nó là như thế này, mặc định đầu tiên chúng ta đã dùng jQuery chọn vào tất cả những thẻ li của thẻ ul có class là tabs, trong đoạn mã trên bạn có thể thể thấy var tabNum = $(this).index(), hàm index() là hàm cho chúng ta biết được đó là thẻ li thứ mấy nằm trong thẻ ul mà chúng ta đang chọn, và trong lập trình đương nhiên là số bắt đầu là số 0 chứ không phải số 1, nên chúng ta tạo tiếp 1 biết khác nthChild = tabNum+1 để biết chính xác nó đang nằm ở vị trí nào để chọn vào phần li chứa nội dung tương ứng.
Chúng ta tiếp tục dùng jQuery kết hợp CSS3 để chọn vào đúng thẻ li với thứ tự tương ứng chứa nội dung, và chèn vào class active.
Các bạn cho toàn bộ css vào cặp thẻ
<style type="text/css">Phần CSS ở trên vào đây</style>
và toàn bộ jQuery vào cặp thẻ
<script type="text/javscript>Toàn bộ nội dung jQuery</script>.
Sửa phần HTML tương ứng với nội dung và tiêu đề các thẻ của bạn là được.
Lời kết
Việc phân chia nội dung theo tab này thì bạn có thể áp dụng để làm nhiều cái như, template cho Blogspot cũng như các mã nguồn khác, hoặc muốn phân chia phần nội dung của mình để người đọc tiếp cận một cách tốt hơn. Nếu bạn thích bài viết có thể +1, like hoặc comment, hoặc bạn nào không thích hoặc có thắc mắc có thể để lại comment ở dưới cho mình biết lý do hoặc thắc mắc nhé.
P/S: Nếu các bạn muốn mình viết về chủ đề gì tiếp theo có thể tiếp tục liên hệ với mình qua biểu mẫu liên hệ trên website hoặc giửi mail trực tiếp cho mình qua rainbow.lam25@gmail.com. Mình không trả lời inbox facebook nhé nên mọi người đừng nhắn bên đấy nữa T_T
Chủ đề chính là gần đây có bạn hỏi mình về cách phân trang bài viết cho Blogspot. Thế tiện thể đây mình làm một bài hướng dẫn về vấn đề này. Thực chất thì thủ thuật này có tên gọi là Tab Nội Dung (Tabbed Content) rất nhiều trên mạng, đủ cách làm Javascript, jQuery ngay cả CSS3 không cũng làm được nữa. Và không chỉ dành riêng cho Blogspot mà bất cứ mã nguồn nào hỗ trợ những ngôn ngữ làm web cơ bản.
Bài viết này chúng ta sẽ cùng nhau làm các Tab mà trong mỗi Tab là những phần nội dung của chúng ta. Việc phân chia nội dung theo Tab có nghĩa là sao, toàn bộ phần nội dung sẽ không được hiển thị mà sẽ được chia ra từng phần nhỏ nằm trong từng Tab. Khi người dùng chọn vào một Tab bất kì thì website sẽ hiển thị lên nội dung tương ứng. Chúng ta bắt đầu vào làm nó nhé, lần này mình sẽ hướng dẫn bằng jQuery, bạn nào thích mình hướng dẫn bên CSS3 thì có thể cho mình biết nhé.
DEMO
- Tab 1
- Tab 2
- Tab 3
- Tab 4
- Tab 5
Nội dung cho tab 1
Nội dung cho tab 2
Nội dung cho tab 3
Nội dung cho tab 4
Nội dung cho tab 5
Cấu trúc HTML
Đối với cấu trúc cho việc làm Tab Nội dung thì khá đơn giản.<ul id="tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
</ul>
<ul id="tab">
<li class="active">
<h2>Nội dung cho tab 1</h2>
</li>
<li>
<h2>Nội dung cho tab 2</h2>
</li>
<li>
<h2>Nội dung cho tab 3</h2>
</li>
<li>
<h2>Nội dung cho tab 4</h2>
</li>
<li>
<h2>Nội dung cho tab 5</h2>
</li>
</ul>
Cấu trúc HTML bao gồm chỉ thẻ ul và li. Nhìn sơ qua thì mình chắc mọi người cũng có thể đoán được là thẻ ul có class là tabs dùng để chứa các thẻ li là các Tab mà người dùng sẽ nhắp chọn. Còn thẻ ul có class là tab chứa nội dung tương ứng với các tab đó.
Phần CSS
ul#tabs {
list-style-type: none;
padding: 0;
text-align: center;
}
ul#tabs li {
display: inline-block;
background-color: #32c896;
border-bottom: solid 5px #238b68;
padding: 5px 20px;
margin-bottom: 4px;
color: #fff;
cursor: pointer;
}
ul#tabs li:hover {
background-color: #238b68;
}
ul#tabs li.active {
background-color: #238b68;
}
ul#tab {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#tab li {
display: none;
}
ul#tab li.active {
display: block;
}Tính năng với jQuery
Đây chắc là đoạn code quan trọng nhất giúp toàn bộ mọi thứ hoạt động, nó khá đơn giản thôi cùng xem nhé.$(document).ready(function(){
$("ul#tabs li").click(function(e){
if (!$(this).hasClass("active")) {
var tabNum = $(this).index();
var nthChild = tabNum+1;
$("ul#tabs li.active").removeClass("active");
$(this).addClass("active");
$("ul#tab li.active").removeClass("active");
$("ul#tab li:nth-child("+nthChild+")").addClass("active");
}
});
});Thế làm sao mà nó biết được nội dung nào tương ứng để thêm class active để hiển thị phần nội dung đó lên? Nó là như thế này, mặc định đầu tiên chúng ta đã dùng jQuery chọn vào tất cả những thẻ li của thẻ ul có class là tabs, trong đoạn mã trên bạn có thể thể thấy var tabNum = $(this).index(), hàm index() là hàm cho chúng ta biết được đó là thẻ li thứ mấy nằm trong thẻ ul mà chúng ta đang chọn, và trong lập trình đương nhiên là số bắt đầu là số 0 chứ không phải số 1, nên chúng ta tạo tiếp 1 biết khác nthChild = tabNum+1 để biết chính xác nó đang nằm ở vị trí nào để chọn vào phần li chứa nội dung tương ứng.
Chúng ta tiếp tục dùng jQuery kết hợp CSS3 để chọn vào đúng thẻ li với thứ tự tương ứng chứa nội dung, và chèn vào class active.
Sử dụng trong bài viết Blogger như thế nào
Mục này mình hướng dẫn cho những bàn nào ko rành chỉ muốn xài thôi cho Blogger, Blogspot nhé. Đầu tiên bạn phải chắc rằng trong template của mình có sử dụng jQuery. Tiếp tục là lúc soạn thảo bài viết các bạn chuyển qua soạn thảo ở chế độ HTML.Các bạn cho toàn bộ css vào cặp thẻ
<style type="text/css">Phần CSS ở trên vào đây</style>
và toàn bộ jQuery vào cặp thẻ
<script type="text/javscript>Toàn bộ nội dung jQuery</script>.
Sửa phần HTML tương ứng với nội dung và tiêu đề các thẻ của bạn là được.
Lời kết
Việc phân chia nội dung theo tab này thì bạn có thể áp dụng để làm nhiều cái như, template cho Blogspot cũng như các mã nguồn khác, hoặc muốn phân chia phần nội dung của mình để người đọc tiếp cận một cách tốt hơn. Nếu bạn thích bài viết có thể +1, like hoặc comment, hoặc bạn nào không thích hoặc có thắc mắc có thể để lại comment ở dưới cho mình biết lý do hoặc thắc mắc nhé.
P/S: Nếu các bạn muốn mình viết về chủ đề gì tiếp theo có thể tiếp tục liên hệ với mình qua biểu mẫu liên hệ trên website hoặc giửi mail trực tiếp cho mình qua rainbow.lam25@gmail.com. Mình không trả lời inbox facebook nhé nên mọi người đừng nhắn bên đấy nữa T_T
