Jquery Tab simple example

download latest jquery
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tabify.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
   $('#tabs').tabify();
  });
 </script>

jquery.tabify.js

(function(a){a.fn.extend({tabify:function(e){function c(b){hash=a(b).find("a").attr("href");return hash=hash.substring(0,hash.length-4)}function f(b){a(b).addClass("active");a(c(b)).show();a(b).siblings("li").each(function(){a(this).removeClass("active");a(c(this)).hide()})}return this.each(function(){function b(){location.hash&&a(d).find("a[href="+location.hash+"]").length>0&&f(a(d).find("a[href="+location.hash+"]").parent())}var d=this,g={ul:a(d)};a(this).find("li a").each(function(){a(this).attr("href", a(this).attr("href")+"-tab")});location.hash&&b();setInterval(b,100);a(this).find("li").each(function(){a(this).hasClass("active")?a(c(this)).show():a(c(this)).hide()});e&&e(g)})}})})(jQuery);


html
 <div id="main">
                    <ul id="tabs" class="tabs">
                    <li  class="active"><a href="#tab1">live! 24</a></li>
                    <li><a href="#tab2" class="second">Kategóriák</a></li>
                   <li><a href="#tab3" class="second">Kategóriák</a></li>
                   </ul>
<div id="tab1">

Tab1

</div>

<div id="tab2">

Tab 2

</div>

<div id="tab3">

Tab 3

</div>

 </div>






 css file

#main .tabs { padding: 0; clear: both; }
#main .tabs li { display: inline; }
#main .tabs li a {background: #BEB9B2;
    border-bottom: medium none;
    border-right: 1px solid #CCCCFF;
    color: #fff;
    float: left;
    font-weight: bold;
    margin-left: 3px;
    padding: 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100px;
    font-size:16px;
    height: 14px;
    line-height: 14px;
     }
#main .tabs li.active a {  text-decoration:none;
 background-color:#E60000; width: 100px;
 font-size:16px;
  color: #fff; }