Search code examples
javascriptjqueryjquery-tabs

how to disable jquery tabs onloading


how to disable the tab on load function ?. I need to disable tabs onload function and enabled onclick of save button. how to achieve this?

my code is in jsp

<div id="tabs1" >
<ul>
    <li><a href="#tabs1-1" id="tabs01">Incident Info</a></li>
      <li><a href="#tabs1-2"  id="tabs02">Incident Notes</a></li>         
    </ul>
<div id="tabs1-1">
<span>This is incident info</span>
</div>
<div id="tabs1-2">
<span>This is incident Note</span>
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
 $('#tabs1-2').hide();
    $('#tabs1-1').show();
    $('#tabs1 ul li:first').addClass('active');

    $('#tabs1 ul li a').click(function(){ 
        $('#tabs1 ul li').removeClass('active');
        $(this).parent().addClass('active'); 
        var currentTab =jQuery(this).attr('href'); 
        if(currentTab=="#tabs1-1"){
             $('#tabs1-2').hide();
            $('#tabs1-1').show();
        }
        else if(currentTab=="#tabs1-2"){
             $('#tabs1-1').hide();
                $('#tabs1-2').show();
        }
        return false;
    });
});

</script>

and enabled from onclick of save button (it is in js page)

function save(){
// here I need to enabled 
}

I need tab disabled on load ,for this what to do?


Solution

  • Use the disabled option:

    $("#tabs1").tabs({
        disabled: true
    });
    

    Then when you want to enable the tabs, use the option method:

    $("#tabs1").tabs("option" , disabled , false);