How do I prevent the tab from changing

I am able to get into the function it calls the prevent and I return false but the tab still switches? Any ideas of what I am doing wrong?

<ul class="nav nav-tabs" id="templateActionTab">
       <li id="menuTemplateTab" class="active"><a data-toggle="tab" href="#templateTab">Template</a></li>
       <li id="menuAction"><a data-toggle="tab" href="#actionTab">Action</a></li>
       <li id="menuScheduler"><a data-toggle="tab" href="#schedulerTab">Scheduler</a></li>

$(document).on('', 'a[data-toggle="tab"]', function (event) {

  var isValidationValid = templateInstance.validateScreen();

    localStorage.setItem('activeTab', $('href'));
    return true;

    return false;



Source: stackoverflow-javascript