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

<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>

<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>

<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>