Chuyển đến nội dung chính

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

  • 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ừ khóa tìm kiếm…
Tạo Tab Nội Dung đơn giản với HTML, CSS, jQuery
Ngày 09 tháng 07 năm 2016 bới Lâm Kiều 6 nhận xét


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é.
<style type="text/css">Phần CSS ở trên vào đây</style>
và toàn bộ jQuery vào cặp thẻ
<script></script>



Nhận xét

Bài đăng phổ biến từ blog này

[Blogger] Gỡ bỏ bản quyền template Blogspot không bị chuyển hướng

Xin chào các blogger, hẳn khi làm blog bạn chẳng còn xa lạ gì những trang cung cấp template nổi tiếng như soratemplates, gooyaabitemplates,... đúng không. Mỗi khi bạn tải template về thường có 2 tùy chọn đó là bản free và bản premium. Sự khác biệt giữa chúng là quá rõ ràng kể đến như support hoặc mã hóa code,...


Dân nghèo như chúng ta thường chỉ chơi bản free thôi, và đương nhiên sẽ có nhiều template dính quả bản quyền thần chưởng, ở đó thì họ thường gắn tên vào cuối footer và khi ta xóa dòng đó đi web site sẽ tự động chuyển hướng tới trang chủ của họ. Nói chung ta không nên xóa bản quyền template đi vì đó thể hiện sự tôn trọng tới người đã tạo ra template cho ta sử dụng.

Còn trong khuôn khổ bài viết này hung1001 sẽ cùng bạn tìm hiểu cách gỡ và thêm bản quyền của bạn vào nếu như bạn thích.


Ở đây tôi làm mẫu với template Treasury của Sora bản free. Đây là dòng tác giả đã chèn bản quyền và có đoạn js điều hướng nếu dòng bị xóa


Nhiệm vụ của bạn đó là đi dò toàn bộ các đoạn mã js đã bị mã hó…

[Blogger] Tạo hiệu ứng tuyết rơi chào đón Noel cho blogspot

Noel sắp đến để tăng thêm hiệu ứng cho blog của bạn hãy thêm vào 1 chút hiệu ứng tuyết rơi để cho không khí thêm sôi động


Cách làm cực kì đơn giản:

Đăng nhập vào blogChọn mẫu và vào phần chỉnh sửa htmlBạn để đoạn code sau vào giữa cặp thẻ <body> ... </body>
<script src='https://cdn.rawgit.com/hung1001/blogspot/master/js/tuyetroi.js'/>

Code nhúng trực tiếp vào web không thông qua host

<script type="text/javascript">
//<![CDATA[
var snowmax=100
var snowcolor=new Array("#f2f8fa","#eff5f7","#dcedf1","#ffffff")
var snowtype=new Array("Times","Arial","Times","Verdana")
var snowletter="*"
var sinkspeed=1
var snowmaxsize=30
var snowminsize=20
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
v…

Share Template Mudah Grid Responsive.

Chào mọi người, dạo gần đây mình thấy có một bản mẫu blogspot đi kèm với một giao diện khá thân thiện nên mình cũng đem về rồi nhờ người anh em thân thiết xóa cái bản quyền template đi rồi share cho anh em dùng.  ƯU ĐIỂMLoad nhanhSEO tốtChuẩn responsiveRecent labelButton ShareFollow by emailBreadcrumbs...NHƯỢC ĐIỂMThì mình chưa tìm ra. Cách nhận template- Comment link share trên mạng xã hội ( tùy tâm ) - Comment mail phía dưới. Lưu ý: Bản này hoàn toàn đã xóa bản quyền rồi nhé.
Xem Demo