Set class active in tab-pane of tabbable bootstrap

Question

I try to set active a class of a table in bootstrap : http://twitter.github.io/bootstrap/components.html#navs

I use php and html to show my table but how can i set active some element ?

<div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <?php 
            foreach ($this->aliasRead as $key => $value):
                echo '<li class="active"><a href="#'.$value[0].'" data-toggle="tab">'.$value[0].'  
                    <button class="btn btn-danger" ><i class="icon-trash icon-white"></i></button></a>
                    </li>
                    ';
            endforeach;
        ?>
    </ul>

    <div class="tab-content">

        <?php foreach ($this->aliasRead as $key => $value):
            echo '<div class="tab-pane active" id="'.$value[0].'">';
        ?>

            <H4>Alias redirigé vers l'adresse : 
                <button href="#modifalias" role="link" data-toggle="modal" class="btn btn-primary"><i class="icon-plus icon-white"></i></button>
            </H4>

            <table class="table table-striped">
                <tbody>
                    <?php foreach ($value as $key => $v):
                        if($key > 0)
                            echo '<tr>
                                <td>'.$v.'</td> 
                                <td>
                                <button class="btn btn"><i class="icon-trash"></i></button>
                                </td>
                                </tr>';
                        endforeach;
                    ?>
                </tbody>
            </table>  
        <?php endforeach; ?> 
    </div>               
</div>

In this exemple, all tab-pane are active and all li are active, i just want to set class active when i click on a : li

EDIT

i try that and it's works for the li the class is active when i click on but i try to set active the class tab-pane when i clik on a li

I try that, doesn't work.

<script type="text/javascript">
$(function(){
    $('.nav-tabs li').on('click', function(event) {
        $('.nav-tabs li').removeClass('active'); // remove active class from tabs
        $(this).addClass('active'); // add active class to clicked tab
    });
    $('.nav-tabs li').on('click', function(event) {
        $('.tab-content div').removeClass('active');
        $('.tab-content div').addClass('active');
    });

});

</script>

The probleme is the ligne :

$('.tab-content div').addClass('active');

how to select the right tabpanel corresponds to li ?

Answer 1

If you're using Bootstrap, shouldn't the JavaScript for this be as simple as:

$('.nav-tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

Answer 2

Although you are building the page using PHP, it looks like the tab changes are handled via Javascript (unless you provide further code about how the tab change is handled)

Assuming that is correct you need to use Javascript to handle the setting of the active class, not PHP.

For example

$('.nav-tabs li').on('click', function(event) {
    $('.nav-tabs li').removeClass('active'); // remove active class from tabs
    $(this).addClass('active'); // add active class to clicked tab
});

I am basis this on some big assumptions though, i.e that you are handling tab change in JS not PHP

Edit:

Trying adding this to your tab output

<li class="active"><a href="#'.$value[0].'" data-toggle="tab" data-id="'.$value[0].'">

Then in your Javascript replace what I suggested previously with this

$('.nav-tabs li').on('click', function(event) {
    $('.nav-tabs li').removeClass('active'); // remove active class from tabs
    $(this).addClass('active'); // add active class to clicked tab
    $('.tab-content div').hide(); // hide all tab content
    $('#' + $(this).data('id')).show(); // show the tab content with matching id
});

You will also have to hide all tab content blocks on page load except for your inital tab

Answer 3

Why don´t set

$i=1,

<?php 
        foreach ($this->aliasRead as $key => $value):

                    echo '<li <?if($i ==1){echo 'class="active"';}?>><a href="#'.$value[0].'" data-toggle="tab">'.$value[0].'  
                                <button class="btn btn-danger" ><i class="icon-trash icon-white"></i></button></a>
                          </li>
                        '; $i++
        endforeach;
    ?>

This solves the all are active problem. I don´t understand the second, but i´ll check the project i worked on with tabs an maybe i´ll edit this post.

@fullybaked Posted the correct addition to what i wanted to research now.