1. Trang chủ
3. Blog
5. Share code tạo Tab cho bài viết

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

Hòa Trần Blogger

tháng 1 06, 2020

Blog

Mục lục

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.

Chia sẻ:

Đã sao chép link!

Bài viết mới