{"id":2250,"date":"2013-08-01T01:13:57","date_gmt":"2013-08-01T01:13:57","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=2250"},"modified":"2017-03-17T14:37:05","modified_gmt":"2017-03-17T14:37:05","slug":"jquery-huong-dan-tao-jquery-tabs-don-gian","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/jquery-huong-dan-tao-jquery-tabs-don-gian\/","title":{"rendered":"[jQuery] H\u01b0\u1edbng d\u1eabn t\u1ea1o jQuery Tabs \u0111\u01a1n gi\u1ea3n"},"content":{"rendered":"

Trong vi\u1ec7c thi\u1ebft k\u1ebf web th\u00ec ng\u01b0\u1eddi thi\u1ebft k\u1ebf bao gi\u1edd c\u0169ng c\u00f3 nhi\u1ec1u s\u1ef1 l\u1ef1a ch\u1ecdn trong vi\u1ec7c tr\u00ecnh b\u00e0y giao di\u1ec7n. Tuy nhi\u00ean l\u00e0m nh\u01b0 th\u1ebf n\u00e0o cho h\u1ee3p l\u00fd, l\u00e0m th\u1ebf n\u00e0o cho th\u1ecfa m\u00e3n nhu c\u1ea7u kh\u00e1ch h\u00e0ng \u0111\u00f3 l\u00e0 m\u1ee5c \u0111\u00edch c\u1ee7a ch\u00fang ta. H\u00f4m nay m\u00ecnh gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n c\u00e1ch t\u1ea1o jQuery Tabs v\u00e0 t\u00e1c d\u1ee5ng c\u1ee7a n\u00f3.<\/p>\n

\u0110\u1ed1i v\u1edbi nh\u1eefng ai \u0111\u00e3 h\u1ecdc qua HTML & CSS c\u0169ng nh\u01b0 t\u1eebng xem nhi\u1ec1u website th\u00ec kh\u00e1 r\u00f5 v\u1ec1 Tabs l\u00e0 g\u00ec r\u1ed3i. Tabs l\u00e0 m\u1ed9t c\u00e1ch tr\u00ecnh b\u00e0y \u0111\u01b0\u1ee3c nhi\u1ec1u th\u00f4ng tin trong c\u0169ng m\u1ed9t kh\u00f4ng gian tr\u00ean trang web. N\u00f3 c\u00f3 th\u1ec3 gi\u00fap c\u00e1c b\u1ea1n ti\u1ebft ki\u1ec7m \u0111\u01b0\u1ee3c di\u1ec7n t\u00edch website v\u00e0 t\u1ea1o s\u1ef1 chuy\u00ean nghi\u1ec7p, tr\u00e1nh th\u00f4ng tin tr\u00e0n lang g\u00e2y kh\u00f3 ch\u1ecbu cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n

\"[jQuery]<\/p>\n

C\u00e1ch t\u1ea1o jQuery Tabs<\/p>\n

Ti\u1ebfp theo b\u1ea1n khai b\u00e1o ph\u1ea7n HTML cho n\u00f3, ph\u1ea7n n\u00e0y s\u1ebd t\u1ea1o n\u00ean khung tab cho b\u1ea1n d\u1ef1a v\u00e0o \u0111\u00e2y b\u1ea1n bi\u1ebft \u0111\u01b0\u1ee3c c\u1ea5u tr\u00fac t\u1ea1o n\u00ean Tabs v\u00e0 d\u1ec5 d\u00e0ng cho vi\u1ec7c \u0111\u1ecbnh d\u1ea1ng v\u00e0 th\u00eam d\u1eef li\u1ec7u.<\/p>\n

\r\n\r\n  <ul class='tabs'>\r\n    <li><a href='#tab1'>Tab 1<\/a><\/li>\r\n    <li><a href='#tab2'>Tab 2<\/a><\/li>\r\n    <li><a href='#tab3'>Tab 3<\/a><\/li>\r\n  <\/ul>\r\n  <div id='tab1'>\r\n    <p>Hi, this is the first tab.<\/p>\r\n  <\/div>\r\n  <div id='tab2'>\r\n    <p>This is the 2nd tab.<\/p>\r\n  <\/div>\r\n  <div id='tab3'>\r\n    <p>And this is the 3rd tab.<\/p>\r\n  <\/div>\r\n\r\n<\/pre>\n
\u1ede \u0111\u00e2y b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng nh\u1eadn th\u1ea5y \u0111\u01b0\u1ee3c tabs m\u00ecnh s\u1ebd c\u00f3 3 tabs, m\u1ed7i tab s\u1ebd c\u00f3 nh\u00e3n l\u1ea7n l\u01b0\u1ee3t l\u00e0 Tab 1, Tab 2, Tab 3 v\u00e0 ph\u1ea7n tr\u00ecnh b\u00e0i n\u1ed9i dung t\u01b0\u01a1ng \u1ee9ng b\u00ean d\u01b0\u1edbi.<\/p>\n
Import jQuery v\u00e0o trong file HTML c\u1ee7a b\u1ea1n, download tai http:\/\/jquery.com\/<\/a>:<\/p>\n
\r\n\r\n<script src="js\/jquery.js"><\/script>\r\n\r\n<script>\r\n\r\n$('ul.tabs').each(function(){\r\n  \/\/ For each set of tabs, we want to keep track of\r\n  \/\/ which tab is active and it's associated content\r\n  var $active, $content, $links = $(this).find('a');\r\n\r\n  \/\/ If the location.hash matches one of the links, use that as the active tab.\r\n  \/\/ If no match is found, use the first link as the initial active tab.\r\n  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);\r\n  $active.addClass('active');\r\n  $content = $($active.attr('href'));\r\n\r\n  \/\/ Hide the remaining content\r\n  $links.not($active).each(function () {\r\n    $($(this).attr('href')).hide();\r\n  });\r\n\r\n  \/\/ Bind the click event handler\r\n  $(this).on('click', 'a', function(e){\r\n    \/\/ Make the old tab inactive.\r\n    $active.removeClass('active');\r\n    $content.hide();\r\n\r\n    \/\/ Update the variables with the new link and content\r\n    $active = $(this);\r\n    $content = $($(this).attr('href'));\r\n\r\n    \/\/ Make the tab active.\r\n    $active.addClass('active');\r\n    $content.show();\r\n\r\n    \/\/ Prevent the anchor's default click action\r\n    e.preventDefault();\r\n  });\r\n});\r\n<\/script>\r\n<\/pre>\n
Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n
Ngu\u1ed3n: http:\/\/www.jacklmoore.com\/notes\/jquery-tabs\/<\/p>\n","protected":false},"excerpt":{"rendered":"
Trong vi\u1ec7c thi\u1ebft k\u1ebf web th\u00ec ng\u01b0\u1eddi thi\u1ebft k\u1ebf bao gi\u1edd c\u0169ng c\u00f3 nhi\u1ec1u s\u1ef1 l\u1ef1a ch\u1ecdn trong vi\u1ec7c tr\u00ecnh […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[142],"tags":[],"class_list":["post-2250","post","type-post","status-publish","format-standard","hentry","category-thu-thuat-jquery"],"views":422,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/2250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=2250"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/2250\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=2250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=2250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=2250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}