Live Code Editor Version 2.0

jQuery Example - Tab - 1 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://freetuts.net/public/javascript/jquery.min.js" ></script>
        <style type="text/css">
            .tab-wrapper{
                width: 500px;
                margin: 50px 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>
        
    </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>