1

I am using Bootstrap and have Tabs that are created dynamically. Although they are dynamic, I will only create 3 Tabs. They are: Draft, Published and Archived. These are actually Enums.

When I click on a tab, I want to change a hidden field to the same value of the tab so that when Postback occurs, I wish to open the selected that was previously opened.

The tabs id is #i where i is the iterator within the for loop. So the Tabs will be: #0, #1 and #2.

Does anyone know how I can create one onclick event for all the tabs and make the hidden field's value change to that of the Tabs id.

This is the the code:

<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 に答える