通过单击django表单模板获取活动选项卡

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

我只是添加到我的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>

来源

2017-03-08 Boerne

如果您想发表关于用户界面（活动标签）的信息，你会需要它放入您的形式莫名其妙。我的首选方法是通过JavaScript（通过附加一个事件到选项卡（或修改现有事件）来更新表单中的隐藏字段，通过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); 
}); 
})

有了，你应该在你的表单标签的价值，但你需要一个新的字段添加到您的Django形式的定义与小工具类型forms.HiddenInput()持有的值，然后更新myhiddenfield以上输入的CSS ID的名称。

来源

2017-03-08 16:36:24 Tom

非常感谢！到目前为止，我明白我应该做什么。但是，我如何实现这一点？我试图创建一个JavaScript文件并将其加载到我的模板，但它不起作用。 – Boerne

什么部分不起作用？你的文件没有加载，或者代码会引发错误？你还需要包含jQuery，你可以从他们的CDN获得（https://code.jquery.com/）。如果你的文件没有加载，这可能意味着你的[静态文件设置]有问题（https://docs.djangoproject.com/en/1.10/howto/static-files/）。在这种情况下，最简单的方法是将此代码放在页面的'

如果您使用的是Bootstrap，您可以轻松地通过为该标签分配一个活动类来实现。

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

来源

2017-03-08 16:41:31

这将是一个静态类。我想要做的是获得一个动态功能，将活动类添加到被点击的选项卡上。 – Boerne

在这种情况下，您可以使用jQuery将此类属性分配给标记，如：$（“＃tag_id”）。attr（'class'，'active'）' –

通过单击django表单模板获取活动选项卡

回答

相关问题