1

我尝试在 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都处于活动状态，我只想在单击 a 时将类设置为活动状态：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？

4

3 回答 3

2

尽管您使用 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
});

您还必须在页面加载时隐藏所有选项卡内容块，但初始选项卡除外

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

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

@fullybaked 为我现在想研究的内容发布了正确的补充。

于 2013-05-17T14:23:59.417 回答