I just fixed it. The issue was that
<li><a href="#tab2" data-toggle="tab2">Add Text</a>
</li>
<li><a href="#tab3" data-toggle="tab3">Add Logos</a>
Should've said data-toggle="tab"
instead of tab#
.
Frage
I have some html that is rendered by Flask. I have three navigation tabs that the user can click on to see different panels. This is the relevant code:
<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>
When I open the HTML file by itself, I can click on the different tabs and get the relevant tab-pane's to open up. When the page is rendered by Flask though, I'm unable to get the functionality to work. Clicking the tabs doesn't do anything. What am I doing wrong?
I understand Flask uses Jinja templates so I must not be understanding that properly, but I'm not sure how to fix it. Thanks in advance for your help.
Lösung
I just fixed it. The issue was that
<li><a href="#tab2" data-toggle="tab2">Add Text</a>
</li>
<li><a href="#tab3" data-toggle="tab3">Add Logos</a>
Should've said data-toggle="tab"
instead of tab#
.