1

我正在使用 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>
        }
4

3 回答 3

1

你不能给你的标签一个类，然后像这样绑定到它们：

$(".tabs").on('click', function() {
 $('#my_input').val($(this).attr('id'));
});

此外，您需要以字母开头的标签 ID 标签。例如#t1、#t2 等。

于 2013-01-30T14:05:15.240 回答
1

对现在和将来匹配当前选择器的所有元素使用 Live 事件处理程序。

为所有生成的选项卡提供一个通用类，以便实时事件绑定器也绑定到所有新创建的选项卡

$("a.offsite").live("click", function(){
    alert("Hi!");
    //Your code
});

参考http://api.jquery.com/live/

希望这可以帮助

于 2013-01-30T14:06:42.527 回答
1

尝试使用在活动选项卡更改时触发的show 事件：

$('#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'));
})
于 2013-01-30T14:09:18.450 回答