Tabs chuyển nội dung với 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

<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>

<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>