Jquery tab control- Applying active tab style

Copy and paste below code to change html portion as tab control:

Include jquery:

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

  CSS:

ul
{
    margin:0;
    padding:0;
    list-style:none;
}
ul li
{
    float:left;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:1em;
    color:#ce3810;
        font-weight:bold;
}
ul li a
{
    padding:2px 11px;
    display:block;
    text-decoration:none;
    border-bottom:#fff 1px solid;
    color:#DC9079;
    font-weight:bold;
    text-shadow:#fff 1px 1px 0px;
}
ul li.active a
{
    padding:2px 10px;
    border-left:#fff 1px solid;
    border-right:#fff 1px solid;
    border-top:#fff 1px solid;
    color:#CE3810;
    font-weight:bold;
    text-shadow:#fff 1px 1px 0px;
}
ul li a:hover
{
    padding:2px 10px;
    border-left:#fff 1px solid;
    border-right:#fff 1px solid;
    border-top:#fff 1px solid;
    border-bottom:none;
    display:block;
    text-decoration:none;
    color:#ce3810;
    text-shadow:#f3f1ee 1px 1px 0px;
    font-weight:bold;
    cursor: pointer;
}
.tag2{display: none;}
 

HTML:

<div style=" border: 1px solid #000000;width:20%;">
    <ul>
        <li class="default_tab" id="default_tab"><a style="cursor<img src="http://hiox.org/smilies/icon_razz.gif" alt="Razz
" border="0" height="15" width="15">ointer;">MY STYLE 1</a></li>
        <li class="next_tab" id="next_tab"><a style="cursor<img src="http://hiox.org/smilies/icon_razz.gif" alt="Razz
" border="0" height="15" width="15">ointer;">MY STYLE 2</a></li>
        <div class="clear"></div>
    </ul>
     
    <div>
    <div id="tag1" class="tag1">GOOD DAY</div>
    <div id="tag2" class="tag2">NICE DAY</div>
    </div>
         
</div>

JAVA SCRIPT:

$(document).ready(function() {
$("#default_tab").attr('class', 'active');
//$("#next_tab").attr('class', 'active');
    $("#next_tab a").click(function() {
        $('.tag1').hide();
        $('.tag2').show();
        $("#next_tab").attr('class', 'active');
        $("#default_tab").attr('class', '');
    });
     $("#default_tab a").click(function() {
        $('.tag2').hide();
        $('.tag1').show();
        $("#next_tab").attr('class', '');
        $("#default_tab").attr('class', 'active');
    });
});

Sample output: