[Code] Tab responsive tabs custom tab activate ver 2

  • the_dav
    Ở 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>

  • huyvip83
    Spam....!!!


    --Chữ ký--
    Thà làm thằng member thường, còn hơn làm thằng Mod bất đắc dĩ

    Ghé thăm forum chơi nào bạn: http://thainguyennews.forumvi.com
Thông tin tác giả
avatar
MEM LV3
Bài viết :
222
Points :
319
Like :
47
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
226
Points :
371
Like :
65
Punbb
Cẩn thận
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết