Jquery Tab

<script type="text/javascript" src="jquery.js"></script>

/*-------------------------------------------------------------------*/
Put This Function on page

    <script type="text/javascript">

$(document).ready(function() {

    $(".tab_content").hide();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).attr("rel");
        $("#"+activeTab).fadeIn();
    });
});

    </script>
/*-----------------------------------------------------------------------------------*/
Css

<style type="text/css">
               ul.tabs
        {
            margin: 0;
            padding: 0;
            float: left;
            list-style: none;
            height: 32px;
           /* border-bottom: 1px solid #999999;*/
            /*border-left: 1px solid #999999;*/
            width: 90%;
        }
        ul.tabs li
        {
            float: left;
            margin: 0;
            cursor: pointer;
            padding: 0px 21px;
            height: 32px;
            line-height: 31px;
            /*border: 1px solid #999999;*/
            border-left: none;
            font-weight: bold;
            background: #F46004;;
            /*background: rgba(255, 255, 255, .8);*/
            overflow: hidden;
            position: relative;
        }
        ul.tabs li:hover
        {
            background: #CCCCCC;
            color:#fff;
        }
        ul.tabs li.active
        {
            /*background: #F46004;*/
            background: rgba(255, 255, 255, .9);
            color:#F46004;
            /*border-bottom: 1px solid #FFFFFF;*/
        }
        .tab_container
        {
            border: 4px solid rgba(255,255,255,.2);
            /*border: 1px solid #999999;*/
            border-top: none;
            clear: both;
            float: left;
            width: 90%;
            color:#F46004;
            /*background: #FFFFFF;*/
            background: rgba(255, 255, 255, .8);
            font-weight:bold;
           
            height:340px;
           
        }
        .tab_content
        {
            padding: 5px;
            font-size: 1.2em;
            display: none;
        }
        #container
        {
            width: 300px;
            margin: 0 auto;
        }
    </style>

/*-------------------------------------------------------------------*/
html

<div id="container">
        <ul class="tabs">
            <li class="active" rel="tab1">Search</li>
            <li rel="tab2">Register</li>
        </ul>
        <div class="tab_container">
            <!-- #tab1 -->
            <div id="tab1" class="tab_content">
                <p>
                  content
               </p>
           </div>

    

            <!-- #tab2 -->
            <div id="tab2" class="tab_content">
                <p>
                  content
               </p>
           </div>

      </div>

</div>