Như thường lệ chào mừng bạn quay trở lại với dự án Ebook hướng dẫn thiết kế theme wordpress, tôi xin nhắc lại bạn rằng nếu bạn cùng đi với tôi đến cuối dự án này, bạn sẽ làm chủ được cách tự tạo cho mình một theme với phong cách riêng không phụ thuộc vào việc mua theme và thuê người thiết kế, vừa tốt kém đôi lúc lại không như ý muốn
Bài hôm nay tôi và bạn sẽ cùng nhau đi tìm hiểu phần tab, bạn xem qua hình bên dưới
Để làm tab này bạn cần phải tạo một list ul, li, a để chứa menu bài mới, bài xem nhiều, bài ngẫu nhiên, và 3 div để chứa 3 nội dung tương ứng với menu
Phần html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<div class="widget-right"> <ul> <li><a href="#new">Bài mới</a></li> <li><a href="#popular">Bài xem nhiều</a></li> <li><a href="#radom">Bài ngẫu nhiên</a></li> </ul> <div id="popular"> <div class="one-title"> <img src="images/giunhansac.jpg" alt="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" /> <a title="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" href="#">7 bước để giữ nhan sắc hoàn hảo mỗi ngày</a> </div> <div class="one-title"> <img src="images/themdeptrongtiec.jpg" alt="Thêm đẹp trong tiệc mùa hè" /> <a title="Thêm đẹp trong tiệc mùa hè" href="#">Thêm đẹp trong tiệc mùa hè</a> </div> <div class="one-title"> <img src="images/quitactrangdiem.jpg" alt="Quy tắc trang điểm trong những ngày nắng nóng" /> <a title="Quy tắc trang điểm trong những ngày nắng nóng" href="#">Quy tắc trang điểm trong những ngày nắng nóng</a> </div> <div class="one-title"> <img src="images/trangdiemtunhien.jpg" alt="Trang điểm tự nhiên với kẻ mi dạng kem" /> <a title="Trang điểm tự nhiên với kẻ mi dạng kem" href="#">Trang điểm tự nhiên với kẻ mi dạng kem</a> </div> <div class="one-title"> <img src="images/gammautrangdiem.jpg" alt="Gam màu trang điểm nhẹ nhàng nơi công sở" /> <a title="Gam màu trang điểm nhẹ nhàng nơi công sở" href="#">Gam màu trang điểm nhẹ nhàng nơi công sở</a> </div> <div class="one-title"> <img src="images/xinhxinh.jpg" alt="Xinh xinh tóc quăn kết hợp với băng đô" /> <a title="Xinh xinh tóc quăn kết hợp với băng đô" href="#">Xinh xinh tóc quăn kết hợp với băng đô</a> </div> </div> <div id="new"> <div class="one-title"> <img src="images/themdeptrongtiec.jpg" alt="Thêm đẹp trong tiệc mùa hè" /> <a title="Thêm đẹp trong tiệc mùa hè" href="#">Thêm đẹp trong tiệc mùa hè</a> </div> <div class="one-title"> <img src="images/giunhansac.jpg" alt="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" /> <a title="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" href="#">7 bước để giữ nhan sắc hoàn hảo mỗi ngày</a> </div> <div class="one-title"> <img src="images/quitactrangdiem.jpg" alt="Quy tắc trang điểm trong những ngày nắng nóng" /> <a title="Quy tắc trang điểm trong những ngày nắng nóng" href="#">Quy tắc trang điểm trong những ngày nắng nóng</a> </div> <div class="one-title"> <img src="images/trangdiemtunhien.jpg" alt="Trang điểm tự nhiên với kẻ mi dạng kem" /> <a title="Trang điểm tự nhiên với kẻ mi dạng kem" href="#">Trang điểm tự nhiên với kẻ mi dạng kem</a> </div> <div class="one-title"> <img src="images/gammautrangdiem.jpg" alt="Gam màu trang điểm nhẹ nhàng nơi công sở" /> <a title="Gam màu trang điểm nhẹ nhàng nơi công sở" href="#">Gam màu trang điểm nhẹ nhàng nơi công sở</a> </div> <div class="one-title"> <img src="images/xinhxinh.jpg" alt="Xinh xinh tóc quăn kết hợp với băng đô" /> <a title="Xinh xinh tóc quăn kết hợp với băng đô" href="#">Xinh xinh tóc quăn kết hợp với băng đô</a> </div> </div> <div id="radom"> <div class="one-title"> <img src="images/xinhxinh.jpg" alt="Xinh xinh tóc quăn kết hợp với băng đô" /> <a title="Xinh xinh tóc quăn kết hợp với băng đô" href="#">Xinh xinh tóc quăn kết hợp với băng đô</a> </div> <div class="one-title"> <img src="images/giunhansac.jpg" alt="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" /> <a title="7 bước để giữ nhan sắc hoàn hảo mỗi ngày" href="#">7 bước để giữ nhan sắc hoàn hảo mỗi ngày</a> </div> <div class="one-title"> <img src="images/themdeptrongtiec.jpg" alt="Thêm đẹp trong tiệc mùa hè" /> <a title="Thêm đẹp trong tiệc mùa hè" href="#">Thêm đẹp trong tiệc mùa hè</a> </div> <div> <img src="images/quitactrangdiem.jpg" alt="Quy tắc trang điểm trong những ngày nắng nóng" /> <a title="Quy tắc trang điểm trong những ngày nắng nóng" href="#">Quy tắc trang điểm trong những ngày nắng nóng</a> </div> <div class="one-title"> <img src="images/trangdiemtunhien.jpg" alt="Trang điểm tự nhiên với kẻ mi dạng kem" /> <a title="Trang điểm tự nhiên với kẻ mi dạng kem" href="#">Trang điểm tự nhiên với kẻ mi dạng kem</a> </div> <div class="one-title"> <img src="images/gammautrangdiem.jpg" alt="Gam màu trang điểm nhẹ nhàng nơi công sở" /> <a title="Gam màu trang điểm nhẹ nhàng nơi công sở" href="#">Gam màu trang điểm nhẹ nhàng nơi công sở</a> </div> </div> |
Phần css:
1 2 3 4 5 6 7 8 9 10 11 |
/* Tab */ .tabvn{list-style:none} .tabvn li{float:left;display:block;cursor:pointer;padding: 0 15px 5px 0px; margin-bottom:5px; text-transform:uppercase;color:#999;font-size:11px;font-weight:bold; ;} .tabvn li a{color: #0060A6; border-bottom:1px solid #0060b5} .tabvn li a:hover{color: #0060A6; border-bottom:1px solid #ff6600} .tabvn .active{position:relative;color: #0060A6; border-bottom:1px solid #ff6600} |
Phần jquery:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// JavaScript Document $(document).ready(function() { $('.tab_content:not(:first)').hide(); $('.tabvn li a').click(function(){ $('.tabvn li a').removeClass('active'); $(this).addClass('active'); $('.tab_content').hide(); var activeTab = $(this).attr('href'); $(activeTab).fadeIn(); return false; }); }); |
Phần luận:hôm nay tôi sẽ nói về jquery cho phần này, để làm được tab này bạn phải hình dung trong đầu của mình kịch bản của jquery:
1.Khi trang vừa tải xong chúng ta cần hiển thị tab bài mới và hai tab còn lại sẽ ẩn đi( nếu không jquery vào bạn sẽ 3 div chứa ba nội dung tương ứng với menu sẽ xuất hiện theo thứ tự từ trên xuống dưới, người dùng sẽ thấy tất cả 3 nội dung này), đồng thời tab bài mới sẽ có một gạch đỏ ở dưới
2.Khi người dùng muốn chuyển tab, xem bài xem nhiều, bài ngẫu nhiên thì chuyển nội dung tương ứng, đồng thời bôi đỏ ở menu của tab
Trên đây là kịch bạn, sau đây thôi sẽ đi giải thích từng dòng code:
$(document).ready(function() {
//các lệnh con
}):Khi đối tượng document đã sẵn sàng ( khi trang html đã tải xong), document ở đây sẽ là các thành phần như div, ul, li, a.. thì sẽ thực hiện các lệnh nằm trong dấu{}
$(‘.tab_content:not(:first)’).hide() : ẩn tất cả các div có chứa class tab_content trừ div đầu tiên
$(‘.tabvn li a’).click(function(){
//các lệnh con
}) : khi người dùng click để chuyển nội dung thì thực hiện các lệnh con nằm trong này
$(‘.tabvn li a’).removeClass(‘active’) : xóa tất cả class active nằm trong thẻ a(thẻ liên kết)
$(this).addClass(‘active’) : đông thời thêm vào class active cho thẻ a vừa được click ($(this) tượng trưng cho đối tượng hiện tại
$(‘.tab_content’).hide() : ẩn tất cả nội dung của div chứa class tab_content
var activeTab = $(this).attr(‘href’) : tạo một biến để lấy thuộc tính #new, #popular, #random
$(activeTab).fadeIn() : lấy giá trị của biến activeTab để thực hiện lệnh fadeIn (chuyển nội dung)
return false: nếu không có lệnh này thì người dùng sẽ có cảm giác bị dựt, không mượt
Trên đây là tất cả những gì cần nắm cho bài tab của chúng ta, hi vọng sẽ giúp ích được bạn
Tạm biệt và hẹn gặp lại ở phần tiếp theo
Bình luận
Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net
Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress