我正在使用 Bootstrap 并拥有动态创建的选项卡。虽然它们是动态的,但我只会创建 3 个选项卡。它们是:草稿、已发布和存档。这些实际上是枚举。
当我单击一个选项卡时,我想将隐藏字段更改为与该选项卡相同的值,以便在发生回发时,我希望打开之前打开的所选内容。
选项卡 ID 为 #i,其中 i 是 for 循环中的迭代器。因此选项卡将为:#0、#1 和 #2。
有谁知道如何为所有选项卡创建一个 onclick 事件,并将隐藏字段的值更改为选项卡 ID 的值。
这是代码:
<div class="tab-content">
@for (int i = 0; i < Model.WorkflowStatuses.Count; i++)
{
<div class="tab-pane @(i == 0 ? "active" : string.Empty)" id="@i">
编辑 这是我到目前为止所拥有的 - 然而隐藏字段的值没有改变:
<script>
$('#listingTab a[data-toggle="tab"]').on('show', function (e) {
$('#selectedTab').val($(e.target).prop('id'));
})
@Html.HiddenFor(m=>Model.SelectedTab)
@if (Model.AnyListings)
{
<ul class="nav nav-tabs" id="listingTab">
@for (int i = 0; i < Model.WorkflowStatuses.Count; i++)
编辑 我添加了字母“t”,但隐藏值仍然没有改变:
<script>
$('#tab-content a[data-toggle="tab"]').on('show', function (e) {
$('#SelectedTab').val($(e.target).prop('id'));
})
</script>
@Html.HiddenFor(m=>Model.SelectedTab)
@if (Model.AnyListings)
{
<ul class="nav nav-tabs" id="listingTab">
@for (int i = 0; i < Model.WorkflowStatuses.Count; i++)
{
<li class="@(i == 0 ? "active" : string.Empty)"><a href="@string.Format("#t{0}", i)" data-toggle="tab">@Model.WorkflowStatuses[i].ToString()</a></li>
}
最佳答案
尝试使用show
event每当事件选项卡更改时就会触发:
$('#yourTabControl a[data-toggle="tab"]').on('show', function (e) {
$('#hiddenField').val($(e.target).prop('id'));
})
[编辑]:
经过交谈,我们得出结论,e.target
是您单击的链接,而不是它激活的选项卡。因此,为了使代码更简单,我建议在链接上使用 data-tabid
属性:
<li class="@(i == 0 ? "active" : string.Empty)">
<a href="@string.Format("#t{0}", i)" data-toggle="tab"
data-tabid="@i">@Model.WorkflowStatuses[i].ToString()</a></li>
并在事件处理程序中使用它:
$('#yourTabControl a[data-toggle="tab"]').on('show', function (e) {
$('#hiddenField').val($(e.target).data('tabid'));
})
关于jQuery 选择动态生成的选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14605788/