Question

我尝试在bootstrap中设置一个表的类：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 都处于活动状态，我只想在点击“ 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>

问题是ligne：

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

如何选择合适的tabpanel对应li？

Answer 1

虽然您使用PHP构建页面，但看起来选项卡更改是通过Javascript处理的（除非您提供有关如何处理选项卡更改的更多代码）

假设这是正确的，你需要使用Javascript来处理活动类的设置，而不是PHP。

例如

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

我在一些重大假设的基础上，即你正在处理JS中的标签更改而不是PHP

编辑：

尝试将此添加到标签输出

<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
});

除了初始标签

之外，您还必须在页面加载时隐藏所有标签内容块

Answer 2

如果你正在使用Bootstrap，那么JavaScript的代码应该不如：

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

Answer 3

为什么不设置

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

这解决了所有活动问题。我不明白第二个，但我会检查我用标签工作的项目，也许我会编辑这篇文章。

@fullybaked发布了我想要研究的正确的补充。

在tabbable引导程序的选项卡窗格中将类设置为活动状态

3 个答案: