Tabs chuyển nội dung với CSS và Javascript

Chia sẻ:

7.6.19 | 0 nhận xét | lượt xem

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 với hiệu ứng mềm mại

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

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>