Question

我正在开发我的第一个Django应用程序，并希望对其进行优化。如何获取表单模板中的最后一个活动选项卡？我希望从创建或更新表单重定向到页面上的最后一个活动选项卡。我对JavaScript没有任何了解，所以我希望得到一些帮助。

我只是添加到我的HTML：

<script type="text/javascript">

        $('a[data-toggle="tab"]').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });

        $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
            var id = $(e.target).attr("href");
            localStorage.setItem('selectedTab', id)
        });

        var selectedTab = localStorage.getItem('selectedTab');
        if (selectedTab != null) {
            $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
        }
</script>

Answer 1

如果您要发布有关用户界面（活动标签）的信息，您需要以某种方式将其放入表单中。我倾向于通过JavaScript（我将在jQuery中显示它，因为它可能更容易理解）通过将事件附加到选项卡（或修改现有事件）来更新隐藏字段以您的形式，例如，

$(function () {
// assumes an id=myhiddenfield on html element
var form_field = $('#myhiddenfield');
// assumes your tabs all have a class of 'tabs', adds click element
$('.tabs').on('click', function (e) {
  e.preventDefault();
  // assign current tab's html id to form field
  form_field.val(this.id);
});
})

使用它你应该在表单中有tab的值，但是你需要在你的Django表单的定义中添加一个新的字段，其中包含一个小部件类型forms.HiddenInput()来保存值，然后更新{{ 1}}上面带有该输入的CSS id的名称。

Answer 2

如果您使用的是Bootstrap，则可以通过为标记分配活动类来轻松实现。

<div class='active'></div>

在django表单模板中单击以获取活动选项卡

2 个答案: