Live Code Editor Version 2.0

jQuery Example - Tab - 2 RUN

<!DOCTYPE html>
<html>
    <head>
        <title>Tạo tabs trong jQuery</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
        <style type="text/css">
            .tab-wrapper{
                width: 500px;
                margin: 10px auto;
                border: solid 1px #acacac;
            }
            .tab-wrapper ul{
                overflow: hidden;
                background: #aee655;
                margin: 0px;
                padding: 0px;
            }
            .tab-wrapper ul li{
                float: left;
                list-style: none;
                padding: 10px 20px;
                background: #348ec9;
                border-radius: 10px 10px 0px 0px;
                margin-right: 5px;
                margin-top: 5px;
            }
            .tab-wrapper ul li.active{
                background: #Fff;
            }
            .tab-wrapper ul li.active a{
                color: blue;
            }
            .tab-wrapper ul li a{
                color: #fff;
                text-transform: uppercase;
                text-decoration: none;
            }
            .tab-content{
                padding: 20px;
            }
            .tab-item{
                display: none;
            }
        </style>
        <script language="javascript">
            
            $(document).ready(function()
            {
                // Hàm active tab nào đó
                function activeTab(obj)
                {
                    // Xóa class active tất cả các tab
                    $('.tab-wrapper ul li').removeClass('active');

// Thêm class active vòa tab đang click
                    $(obj).addClass('active');

// Lấy href của tab để show content tương ứng
                    var id = $(obj).find('a').attr('href');

// Ẩn hết nội dung các tab đang hiển thị
                    $('.tab-item').hide();

// Hiển thị nội dung của tab hiện tại
                    $(id) .show();
                }

// Sự kiện click đổi tab
                $('.tab li').click(function(){
                    activeTab(this);
                    return false;
                });

// Active tab đầu tiên khi trang web được chạy
                activeTab($('.tab li:first-child'));
            });
        </script>
    </head>
    <body>
        <div class="tab-wrapper">
            <ul class="tab">
                <li>
                    <a href="#tab-main-info">Thông tin chính</a>
                </li>
                <li>
                    <a href="#tab-image">Hình ảnh</a>
                </li>
                <li>
                    <a href="#tab-seo">SEO</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-item" id="tab-main-info">
                    Tab thông tin chinh
                </div>
                <div class="tab-item" id="tab-image">
                    Tab hình ảnh
                </div>
                <div class="tab-item" id="tab-seo">
                    Tab SEO
                </div>
            </div>
        </div>
    </body>
</html>