Q:

Want .focus() attributes to remain when clicking out of a div

This is the code i am using to operate a tab function.
   <div id="tabs">
        <ul class="ulclass">
            <li><a href="#fragment-1" class="button button1"><span>AFFILIATE INFORMATION</span></a></li>
            <li><a href="#fragment-2" class="button"><span>RESELLING</span></a></li>
            <li><a href="#fragment-3" class="button"><span>TERMS AND CONDITIONS</span></a></li>
        </ul>
        <div id="fragment-1" class="tabtext">
        </div>
        <div id="fragment-2" class="tabtext">
        </div>
        <div id="fragment-3" class="tabtext">
        </div>
    </div>

<script>
   $( "#tabs" ).tabs();
</script>

My js to keep the focus effect on on page load is
$(document).ready(function(){
       $('.button1').focus();
});

this is just a background of white to show the selected tab but when i click anywhere but the other tab links (including in the div related to the tab)the focus effect (white) drops off and you can't tell which tab you are on.
Could someone please help me with some jquery to get the focus effect to only remove when the other tabs are clicked on? Thanks!

A:

Try this code
<div class="tab_container">
    <a target="1" class="select">Personal</a>
    <a target="2">Experience</a>
    <a target="3">Education</a>
</div>
<div id="div1" class="tab_link" style="display:block;">
    Personal Details Comes here
</div>
<div id="div2" class="tab_link" style="display:none;">
    Experience Details Comes here
</div>
<div id="div3" class="tab_link" style="display:none;">
    Education Details Comes here
</div>

CSS :
*{margin:0; padding:0; font-family:Tahoma; font-size:12px; color:#333;}
.tab_container{margin:10px; margin-bottom:0;}
.tab_container a{display:inline-block; padding:0 10px; line-height:25px; background:#eee;    border:1px solid #ddd; cursor:pointer;}
.tab_container a.select{background:#fff;}
.tab_link{padding:10px; border:1px solid #ddd; margin:0 10px;}

Javascript :
$('.tab_container a').click(function () {
    $('.tab_link').hide();
    $('.tab_container a').removeClass('select');
    $('#div' + $(this).attr('target')).fadeIn();
    $(this).addClass('select');
});

Make sure to include JQuery also from JQuery.com

