Nội dung bài viết dạng tab cho Blogspot chuyên nghiệp



Nội dung bài viết nhiều tab chủ đề trong bài viết
Để 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: #32c896;
    border-bottom: solid 5px #238b68;
    padding: 5px 20px;
    margin-bottom: 4px;
    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;
}

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>
Demo
Next Post Previous Post
No Comment
Add Comment
comment url