当我使用tal时，Bootstrap选项卡不显示内容：重复以在Pyramid Framework中显示<li>元素

Question

我想使用适用于Python的Bootstrap和Chameleon模板引擎在Pyramid中创建动态标签及其内容，但只有第一个标签保持激活，尽管点击了其他标签。
我的HTML代码：

<ul class="nav nav-tabs responsive">
    <li><a data-toggle="tab" href="#tips">Tips</a></li>
    <li tal:repeat="key dict"><a data-toggle="tab"href="#${key}">${key}  </a></li>
</ul>

<div class="tab-content responsive">
    <div tal:repeat="(keys,value) dict.iteritems()" id="${keys}" class="tab-pane fade">
    <p>${value}</p>
    </div>
    <div id="tips" class="tab-pane fade in active">
        <p>tips</p>
    </div>
</div>