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;
}
Đoạn css trên thì có một số điểm nổi bật như này thôi, một là các thẻ li chứa các tab sử dụng CSS property là display: inline-block giúp cho toàn bộ các tab đứng trên cùng 1 hàng. Thứ 2 là toàn bộ các thẻ li chứa nội dung đều sẽ bị ẩn (display: none), và những thẻ li nào có class là active sẽ được hiển thị (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");
}
});
});
Đầu tiên chúng ta sẽ lắng nghe mọi hoạt động của toàn bộ các phần tử trên web, khi mà người dùng nhắp chọn vào thẻ li bất kì trong cặp thẻ ul có class là tabs, nếu thẻ nhắp chọn vào đang được mở rồi (có class là active) thì thôi, ngược lại nếu nó không phải thì thêm class là active vào thẻ đó, và tiếp tục tìm đến thẻ li hiện tại đang có class là active và xóa nó đi.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
Unknown says
lúc 09:06 10 tháng 7, 2016
Xin Lâm! mình xảy ra lỗi tại đây: https://1.bp.blogspot.com/-r-P1JBAhn8M/V4GsiGlfb7I/AAAAAAAAAJQ/lqBEGVE8QxADe9btgIlQGPWSskIRjkTqACKgB/s1600/sai.JPG Bạn giúp mình khắc phục với nhé.
Đây là template của mình.
https://drive.google.com/open?id=0B90aa-7N7l25SG12TEJHdndNT28
Thân!
Unknown says
lúc 09:13 10 tháng 7, 2016
Xin lỗi là ảnh này, mình chụp sai: https://drive.google.com/file/d/0B90aa-7N7l25QzhoNU52VlpmU3M/view?usp=sharing
Lâm Kiều says
lúc 10:56 10 tháng 7, 2016
Nếu bạn muốn chèn trực tiếp vào template luôn thì bạn chèn như thế này nhé
<script type='text/javascript'>
//<![CDATA[
Nội dung đoạn script trên.
//]]>
</script>
Unknown says
lúc 12:24 10 tháng 7, 2016
Mình làm và vẫn sai ở đâu đó.
Bạn xem qua được không, cám ơn! http://testtabalo.blogspot.com/2016/07/test-tab.html Đã mời qua mail. https://drive.google.com/open?id=0B90aa-7N7l25dlRTd1kwbmhCMHM . Cám ơn
Lâm Kiều says
lúc 13:15 10 tháng 7, 2016
Bạn tìm trong template của bạn
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
chèn script vào dưới nó nhé đừng chèn bên trên là nó sẽ chạy bình thường.
Unknown says
lúc 17:03 10 tháng 7, 2016
Cám ơn bạn! bộ code tab mới này rất hoàn hảo!
NAD says
lúc 15:08 18 tháng 7, 2016
Chào mừng trở lại, đúng lúc có cái này cần nhờ Nâm xem giúp :(
Ko biết thằng google nó mới sửa cái j mà blog mình bị lỗi này:
Cứ thêm chú thích vào ảnh là size ảnh cố định luôn, ko responsive đc, có ảnh vượt quá cả khung max width of temp luôn :(
http://www.duyblog.com/2015/08/tam-phao-5.html
Lâm Kiều says
lúc 15:35 19 tháng 7, 2016
Xưa giờ hình như nó vẫn vậy ấy bác Duy ơi, đặc biết là trên firefox thêm chú thích vào nó còn kinh khủng hơn nữa.
P/S: Không hiểu sao bác comment em chã bao giờ thấy email báo có comment mới @_@
Gia sư tại Hà Nội says
lúc 22:07 23 tháng 7, 2016
Lâu lắm rồi mới thấy lâm trở lại với bài viết này, thỉnh thoảng vẫn vào blog của lâm nhưng tưởng là chủ nhà đóng cửa chuyển nhà rồi cơ
Lâm Kiều says
lúc 14:12 1 tháng 8, 2016
Việc nhiều quá cũng tính nghỉ hưu, mà thôi cố gắng :D
Huyền Chilly says
lúc 17:29 2 tháng 8, 2016
Bài hướng dẫn rất chi tiết. Cảm ơn ad nhiều. Mình làm thử trên site này xem sao http://tribenhtri.us.
Quang Mạnh says
lúc 23:41 23 tháng 8, 2016
7 tháng trời mới có bài mới :)
Lâm Kiều says
lúc 08:26 24 tháng 8, 2016
Dạo này bận quá với bên blogspot cũng ít ý tưởng :D
Danny says
lúc 08:19 13 tháng 10, 2016
Bạn ơi, cái này nếu mình embed video vào thì khi mình play video A, xong chuyển sang tab khác play video B nhưng nó lại không tắt video A. Mình phải làm sao nhỉ?
Lâm Kiều says
lúc 10:03 13 tháng 10, 2016
Đúng rồi bạn, cái này chỉ ẩn hiện các tab khi click thôi. Nếu bạn muốn dừng video thì phải code thêm 1 ít nữa. Thông thường bạn nhúng video như thế nào, bạn có link demo không?
Thanh Hùng says
lúc 07:53 9 tháng 11, 2016
blogspot giờ seo ngon không biết, sao thằng google nó không làm lại mấy cái url chuân một tí nhỉ .
Nguyễn Xuân Hồ says
lúc 20:03 5 tháng 1, 2017
Bạn ơi, có cách nào làm cho youtube hiển thị trên trang chủ blogspot. Vì khi mình chèn youtube vào blogger của mình thì nó chỉ hiển thị bên trong bài viết, còn ngoài trang chủ chỉ có tiêu đề mà thôi. Xin bạn làm ơn giúp mình với. Cảm ơn bạn.
NAD says
lúc 18:23 19 tháng 6, 2017
Lâu lâu vào ghé thăm :(
Lâm Kiều says
lúc 18:39 19 tháng 6, 2017
Đặt backlink cái cho đỡ nhớ :)
Văn Sớm says
lúc 10:18 11 tháng 9, 2017
Tưởng các bác nghỉ hết rồi chứ lại :) . Lâu lâu em cũng vào tự nhiên quên béng mất cái tên web của bác. mãi mới nhớ ra