[Code] Tab responsive tabs custom tab activate ver 2

avatar

the_dav198
284
42
Punbb
Quản trị
Trảm Phong

Bài viết :
198
Points :
284
Like :
42
Punbb
Quản trị
Ở 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:
<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>
 Trả lời bài viết
avatar

huyvip83178
312
62
Punbb
Cẩn thận
Mod phụ hotrofm
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
178
Points :
312
Like :
62
Punbb
Cẩn thận
Mod phụ hotrofm
Spam....!!!
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...