1

ブートストラップでテーブルのクラスをアクティブに設定しようとしています: http://twitter.github.io/bootstrap/components.html#navs

テーブルを表示するために php と html を使用していますが、アクティブな要素を設定するにはどうすればよいですか?

<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>

この例では、すべてのタブ ペインがアクティブで、すべてのliがアクティブです。aをクリックしたときにクラスをアクティブに設定したいだけです。

編集

私はそれを試してみましたが、liをクリックするとクラスがアクティブになりますが、liをクリックするとクラスのタブペインをアクティブに設定しようとしています

私はそれを試してみますが、うまくいきません。

<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>

問題はリーンです：

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

右のタブパネルを選択する方法は、li に対応していますか?

4

3 に答える 3

2

PHP を使用してページを作成していますが、タブの変更は Javascript を介して処理されているようです (タブの変更の処理方法に関するコードをさらに提供しない限り)。

それが正しいと仮定すると、PHP ではなく、アクティブなクラスの設定を処理するために Javascript を使用する必要があります。

例えば

$('.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
});

ただし、これはいくつかの大きな仮定に基づいています。つまり、PHPではなくJSでタブの変更を処理しているということです

編集：

これをタブ出力に追加しようとしています

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

次に、Javascriptで、以前に提案したものをこれに置き換えます

$('.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
});

また、最初のタブを除いて、ページの読み込み時にすべてのタブ コンテンツ ブロックを非表示にする必要があります。

于 2013-05-17T14:23:28.527 に答える
1

Bootstrap を使用している場合、このための JavaScript は次のように単純ではありません。

$('.nav-tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});
于 2013-08-01T13:21:58.623 に答える
0

設定しない理由

$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;
    ?>

これにより、すべてがアクティブであるという問題が解決されます。2番目は理解できませんが、作業したプロジェクトをタブで確認し、この投稿を編集するかもしれません.

@fullybaked 私が今研究したかったことへの正しい追加を投稿しました。

于 2013-05-17T14:23:59.417 に答える