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

使用Flask＆amp; amp;数据切换Jinja模板

1 个答案: