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

Zalo 0971539681 Tư vấn & Hỗ trợ

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>


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

<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

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

Bài liên quan ngẫu nhiên

Nhận xét

Contact Me on Zalo