Tạo tabs chuyển nội dung

Theo yêu cầu của bạn Luân Hồ ở bài viết này mình sẽ hướng dẫn làm cách nào để tạo các tab chuyển đổi qua lại nội dung sử dụng CSS và Javascript

Cấu trúc code để hiển thị nội dung và các tabs

<div id="tabtvl">
    <div class="tab-menu-tvl">
        <ul id="tebslecttvl">
            <li class="tab1z">
                <a href="#xtabx1">Tab 1</a>
            </li>
            <li class="tab2z">
                <a href="#xtabx2">Tab 2</a>
            </li>
        </ul>
    </div>
               <div id="sidetvl">
                        <div class="widget1xx" id="xtabx1">
                             Nội dung tab 1
                        </div>
                        <div class="widget1xx" id="xtabx2">
                             Nội dung tab 2
                       </div>
               </div>
 </div>

CSS

#tabtvl{margin:0 0 15px}
ul#tebslecttvl,ul#tebslecttvl li{padding:0;margin:0;list-style:none;overflow:hidden}
ul#tebslecttvl li{float:left}
ul#tebslecttvl a{display:block;margin:0 5px 0 0;line-height:30px;padding:0 10px;background:#E9D3D3;border-radius:3px 3px 0 0;font-weight:bold}
ul#tebslecttvl li.active a,ul#tebslecttvl a:hover{background:#E6E6E6;color:black}
#sidetvl{padding:10px;background:#E6E6E6;border-radius:0 3px 3px;}

Javascript

Bạn hãy chọn 1 trong hai hiệu ứng chuyển tab bên dưới, xem demo để rõ hơn

• Kiểu 1
• Kiểu 2

Demo

<script type="text/javascript">
//<![CDATA[
$(function(){$("#tebslecttvl li:first").addClass("active");$("#sidetvl > div").hide();$("#sidetvl > div:first").show();$("#tebslecttvl a").click(function(){$("#tebslecttvl li").removeClass("active");$(this).parent().addClass("active");var a=$(this).attr("href");$("#sidetvl > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>

Demo

<script type="text/javascript">
//<![CDATA[
$(function(){$("#tebslecttvl li:first").addClass("active");$("#sidetvl > div").hide();$("#sidetvl > div:first").slideDown();$("#tebslecttvl a").click(function(){$("#tebslecttvl li").removeClass("active");$(this).parent().addClass("active");var a=$(this).attr("href");$("#sidetvl > div:visible").slideUp();$(a).fadeToggle(1000);return false})});
//]]>
</script>

Update

Nếu template bạn chưa cài đặt jQuery thì thêm đoạn code sau vào trước thẻ đóng </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>