使用 Flask 和 Jinja 模板进行数据切换

Question

我有一些由 Flask 呈现的 html。我有三个导航选项卡，用户可以单击它们来查看不同的面板。这是相关代码：

<div class="tabbable">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Pick Colors</a>
    </li>
    <li><a href="#tab2" data-toggle="tab2">Add Text</a>
    </li>
    <li><a href="#tab3" data-toggle="tab3">Add Logos</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <div class="well">
            <ul class="nav">
                <li class="color-preview" title="White" style="background-color:#ffffff;"></li>
            </ul>
        </div>
    </div>
    <div class="tab-pane" id="tab2">
        <div class="well">
            <div class="input-append">
                <input class="span2" id="text-string" type="text" placeholder="add text here...">
                <button id="add-text" class="btn" title="Add text"><i class="icon-share-alt"></i>
                </button>
                <hr>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="tab3">
        <div id="avatarlist">
            <img style="cursor:pointer;" class="img-polaroid" src="static/img/img1.png">
        </div>
    </div>
</div>

当我自己打开 HTML 文件时，我可以单击不同的选项卡并打开相关的选项卡窗格。但是，当页面由 Flask 呈现时，我无法使该功能正常工作。单击选项卡不会执行任何操作。我做错了什么？

我了解 Flask 使用 Jinja 模板，所以我一定没有正确理解这一点，但我不确定如何修复它。在此先感谢您的帮助。

Answer 1

我刚刚修好了。问题是

<li><a href="#tab2" data-toggle="tab2">Add Text</a>
</li>
<li><a href="#tab3" data-toggle="tab3">Add Logos</a>

应该说data-toggle="tab" 而不是tab#。