我仔细阅读了jquery和Semantiv-ui文档。然后,我进行了仔细的试验,发现TAB的工作原理。然后写了下面的javascript代码。我已成功为TAB实施了单独的开关。
我想使用Jinjia渲染模板。此页面上有很多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]
{{%%in plan in plan}}:当要遍历多个目标时,无法分别切换呈现页面的选项卡。
我想使用Jinjia渲染模板。此页面上有很多Semantic-ui选项卡。它是模板代码。 {%扩展“ /base.html”%} {%块内容%}
我仔细阅读了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>
我仔细阅读了jquery和Semantiv-ui文档。然后,我进行了仔细的试验,发现TAB的工作原理。然后写了下面的javascript代码。我已成功为TAB实施了单独的开关。