Tạo Tab nội dung cho blogspot bằng HTML, CSS, jQuery chuyên nghiệp

Để tạo nội dung dạng tab cho blog ta thực hiện như sau:

Bước 1. Chép đoạn code sau đặt đặt trước thẻ </body>

<script type='text/javascript'>
$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
</script>

Bước 2. Chép đoạn CSS sau đặt trước thẻ ]]></b:skin> hoặc bạn có thể bổ sung <style type='text/css'>

 {nội dung code bên dưới} </style> và đặt trước thẻ </head>

ul #tabs {
    list - style - type: none;
    padding: 0;
    text - align: center
}

ul #tabs li {
    display: inline - block;
    background - color: #29088A;
    border-radius: 8px;
    border-bottom: solid 5px # 01 DFD7;
    padding: 5 px 20 px;
    margin - bottom: 4 px;
    color: #fff;
    cursor: pointer
}

ul #tabs li: hover {
    background - color: #238b68
}

ul# tabs li.active {
    background - color: #238b68
}

ul# tab {
    list - style - type: none;
    margin: 0;
    padding: 0
}

ul #tab li {
    display: none
}

ul #tab li.active {
    display: block
}
 

[next]
Bước 3. Vào bài đăng chọn đăng bài mới chọn thẻ HTML và dán code sau vào chỉnh sửa tiêu đề tab theo ý thích đặt nội dung bài viết trong thẻ <h2> {đặt nội dung} </h2>

<ul id="tabs">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
</ul>
<ul id="tab">
    <li class="active">
        <h2>Nội dung cho tab 1</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 2</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 3</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 4</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 5</h2>
    </li>
</ul>
 

Lưu ý: Nếu code không hoạt động là do bạn chưa có Thư viện jquery.min.js. Vui lòng chèn trước thẻ </head> đoạn JavaScript sau:

  <script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>