[Code] Tab responsive tabs custom tab activate ver 2

Ở bài viết trước mình có hướng dẫn các bạn sử dụng Code Tab responsive tabs custom tab activate nhưng code lại có style dọc. giờ có bạn cần hỏi mình làm tạm một code dạng tab dạng ngang. code đơn giản mình copy trên w3schools ( vì nó nhẹ Smile

) . Các bạn có thể mang về tùy biến

[Code] Tab responsive tabs custom tab activate ver 2 D4VwuId

Code:

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'hotrofm1')">Tab1</button>
  <button class="tablinks" onclick="openCity(event, 'hotrofm2')">Tab2</button>
  <button class="tablinks" onclick="openCity(event, 'hotrofm3')">Tab3</button>
  <button class="tablinks" onclick="openCity(event, 'hotrofm4')">Tab4</button>

</div>

<div id="hotrofm1" class="tabcontent" style="display: block;">
  <h3>London</h3>
  <p>Nội dung 1</p>
</div>

<div id="hotrofm2" class="tabcontent">
  <h3>Paris</h3>
  <p>Nội dung 2</p> 
</div>

<div id="hotrofm3" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Nội dung 3</p>
</div>

<div id="hotrofm4" class="tabcontent">
  <h3>Tokyok</h3>
  <p>Nội dung 4</p>
</div>

<style>
/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>

<script>
function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>