如何在 Python-Flask 中使用 Semantic-ui 多个选项卡？

Question

我想用金家渲染template.There这个页面有很多Semantic-ui标签。这是模板代码。

{% extends "/base.html" %}

{% block content %}
<div class="ui centered cards">
{% for p in plan %}
<div class="ui card">
    <div class="ui segment" style="padding:0px;">
        <div class="ui top attached tabular menu" id="{{p,id}}">
            <a class="item active" data-tab="monthly">monthly</a>
            <a class="item" data-tab="quarterly">quarterly</a>
            <a class="item" data-tab="annualy">annualy</a>
            <a class="item" data-tab="yearly">yearly</a>
        </div>
        <div class="ui bottom attached tab segment active" data-tab="monthly">
          {{p.monthly}}{{p.currency}}
        </div>
        <div class="ui bottom attached tab segment" data-tab="quarterly">
          {{p.monthly}}{{p.currency}}
        </div>
        <div class="ui bottom attached tab segment" data-tab="annualy">
          {{p.monthly}}{{p.currency}}
        </div>
        <div class="ui bottom attached tab segment" data-tab="yearly">
          {{p.monthly}}{{p.currency}}
        </div>
    </div>
</div>
{%endfor%}
</div>
</body>
<script>
$('.menu .item')
  .tab()
;
</script>
</html>
{% endblock %}

PS:我在base.html

中引入了语义ui

{% for p in plan %}:当有多个目标遍历时，无法单独切换渲染页面的tab

Answer 1

我仔细阅读了jquery和Semantiv-ui文档。然后我仔细试验，发现TAB是如何工作的。然后写了下面的javascript代码。我成功地为 TAB 实现了一个单独的开关。

<script>
$(document).ready(function(){
  $(".menu .item").click(function(){
    var datatab = $(this).attr("data-tab");
    $(this).closest("div").children(".active").removeClass("active");
    $(this).addClass("active");
    $(this).closest("div").siblings(".active").removeClass("active");
    $(this).closest("div").siblings("[data-tab="+datatab+"]").addClass("active");
});
});
</script>

如何在 Python-Flask 中使用 Semantic-ui 多个选项卡？

How to use Semantic-ui multiple tabs with Python-Flask?

python

templates

jinja2

flask

semantic-ui