Share code tạo Tab cho bài viết

Chia sẻ tới các bạn một đoạn code tạo Tab cho bài viết Blogspot chuẩn Responsive trên Mobile sử dụng JavaScript hoặc jQuery tùy bạn chọn, hi vọng nó sẽ giúp ích cho các bạn kho soạn nội dung bài viết của Blogger.

1. Phiên bản dùng JavaScript

Copy

<style>
/*<![CDATA[*/
.tabs{display:flex;overflow-x:auto;background-color:#333;color:#fff}.tab{cursor:pointer;padding:10px 20px;border-radius:5px;transition:background-color .3s}.tab:hover{background-color:#555}.tab.active{background-color:#555}.tab-content{display:none}.tab-content.active{display:block}@media (max-width:600px){.tabs{flex-direction:column;align-items:stretch}.tab{margin-bottom:5px;width:100%}}
/*]]>*/
</style>

<div class="tabs">
  <div class="tab active" data-tab="tab1" onclick="openTab('tab1')">Tab 1</div>
  <div class="tab" data-tab="tab2" onclick="openTab('tab2')">Tab 2</div>
  <div class="tab" data-tab="tab3" onclick="openTab('tab3')">Tab 3</div>
</div>
<div class="tab-content active" id="tab1">
  <h2>Content for Tab 1</h2>
  <p>This is the content for Tab 1.</p>
</div>
<div class="tab-content" id="tab2">
  <h2>Content for Tab 2</h2>
  <p>This is the content for Tab 2.</p>
</div>
<div class="tab-content" id="tab3">
  <h2>Content for Tab 3</h2>
  <p>This is the content for Tab 3.</p>
</div>

<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function(){openTab('tab1')});function openTab(t){var n=document.querySelector('.tab[data-tab="'+t+'"]');if(!n)return;var e=document.querySelectorAll('.tab-content');for(var i=0;i<e.length;i++)e[i].classList.remove('active');var a=document.querySelectorAll('.tab');for(var i=0;i<a.length;i++)a[i].classList.remove('active');n.classList.add('active'),document.getElementById(t).classList.add('active')}
//]]>
</script>

2. Phiên bản dùng jQuery

Copy

<style>
/*<![CDATA[*/
.tabs{display:flex;overflow-x:auto;background-color:#333;color:#fff}.tab{cursor:pointer;padding:10px 20px;border-radius:5px;transition:background-color .3s}.tab:hover{background-color:#555}.tab.active{background-color:#555}.tab-content{display:none}.tab-content.active{display:block}@media (max-width:600px){.tabs{flex-direction:column;align-items:stretch}.tab{margin-bottom:5px;width:100%}}
/*]]>*/
</style>

<div class="tabs">
  <div class="tab active" data-tab="tab1">Tab 1</div>
  <div class="tab" data-tab="tab2">Tab 2</div>
  <div class="tab" data-tab="tab3">Tab 3</div>
</div>
<div class="tab-content active" id="tab1">
  <h2>Content for Tab 1</h2>
  <p>This is the content for Tab 1.</p>
</div>
<div class="tab-content" id="tab2">
  <h2>Content for Tab 2</h2>
  <p>This is the content for Tab 2.</p>
</div>
<div class="tab-content" id="tab3">
  <h2>Content for Tab 3</h2>
  <p>This is the content for Tab 3.</p>
</div>


<script>
//<![CDATA[
$(document).ready(function(){openTab("tab1");$(".tab").click(function(){var t=$(this).data("tab");openTab(t)});function openTab(t){var e=$('.tab[data-tab="'+t+'"]');if(!e.length)return;$(".tab-content").removeClass("active"),$(".tab").removeClass("active"),e.addClass("active"),$("#"+t).addClass("active")}})
//]]>
</script>

Lưu ý: Phiên bản jQuery phải có thư viện jQuery nó mới hoạt động nha. Thư viện phải đặt trước code, đa số blog nào cũng có sẵn

Copy

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Demo bên dưới

Tab 1

Tab 2

Tab 3

Content for Tab 1

This is the content for Tab 1.

Content for Tab 2

This is the content for Tab 2.

Content for Tab 3

This is the content for Tab 3.