Question

Problem:

To search for tab containing class “active” and remove it while adding an “active” class to current tab on PHP POST submission.

I have a tab menu that looks like this.

HTML code:

<div class="pull-right special-search" id="navtabs">
    <div class="btn-group">
        <a href="#tab1" class="active btn btn-info" data-toggle="tab"><i class="icon-home icon-white"></i>&nbsp;Start</a>
        <a href="#tab2" class="btn btn-info" data-toggle="tab"><i class="icon-book icon-white"></i>&nbsp;Essay</a>
        <a href="#tab3" class="btn btn-info" data-toggle="tab"><i class="icon-ok-sign icon-white"></i>&nbsp;Criteria</a>
        <a href="#tab4" class="btn btn-info" data-toggle="tab"><i class="icon-time icon-white"></i>&nbsp;Activity</a>
    </div>
</div>

To toggle between these tabs I use the following jQuery code:

$('#navtabs a[data-toggle="tab"]').on('shown', function (e) {
    e.target;
    e.relatedTarget;
    $('#navtabs a[data-toggle="tab"]').attr('class','btn btn-info');
    $(this).attr('class','active btn btn-info');
})

So far, so good. Everything works. Now, when I press a button say “submit-updatetime” I want it to be checked with PHP that correspondent to what tab it was sent from. I do this by using a hidden type field:

<input type="hidden" id="submit_button" name="button_pressed">

And then check it with PHP by using the following code:

<?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') 
    {
        $button = $_POST['button_pressed'];

        if ($button == 'submit-updategrades')
            $tabname = 'tab2';
        else if ($button == 'submit-updatetime')
            $tabname = 'tab4';
    }
?>

To make sure that the user stays on the tab he/she was on I use the following PHP/jQuery:

<?php           
    if (!empty($tabname))
    {
        echo '$("#navtabs a[href=#tab1]").removeClass(\'active\');';
        echo '$("#tab1").removeClass(\'active\');';
        echo '$("#navtabs a[href=#'.$tabname.']").addClass(\'active\');';
        echo '$("#'.$tabname.'").addClass(\'active\');';
    }
?>

This works just fine except that I feel that my last PHP/jQuery solution is flawed. For instance, the #tab1 is only active when you enter the page, not necessarily all the time.

Question:

How do I in the last PHP/jQuery code search for the tab that has the class “active” and remove it while at the same time add it to the active tab produced with $tabname?

Answer 1

Ho wo to find tab that has an active class:

$(document).ready(function(){
    var tab = $('#navtabs a.active');
});

Remove that active class on tab found:

$(document).ready(function(){
    var tab = $('#navtabs a.active');
    tab.removeClass('active');
});

Find, remove and add active class to a tab provided from PHP:

<?php           
if (!empty($tabname)) { ?>
$(document).ready(function(){
    var active_tab = '#<?php echo $tabname; ?>';
    var tab = $('#navtabs a.active');
    tab.removeClass('active');
    $('#navtabs a').each(function(){
        if($(this).attr('href') == active_tab) {
            $(this).addClass('active');
            return;
        }
    });
});
<?php } ?>