1

ビューに渡されたオブジェクト（ASP.NET MVC 3を使用しています）をループし、Bootstrapを使用してナビゲーションタブを作成しています。

現時点では、実際のTABSは機能し、正常にレンダリングされます。ただし、タブコンテンツは表示されません。または、基本的に現在のタブコンテンツを表示するクラス「アクティブ」にすると、そのうちの1つが表示されます（別のタブをクリックしても変更されません）。

何をしたいのか：タブをクリック->コンテンツが表示されます。

現在何が起こっているか：タブをクリック->タブコンテンツのクラスをアクティブに変更しない限り何も表示されません（前述のように）。

以下は私のコードです：

<div>
<ul class="nav nav-tabs">
    @for (int i = 0; i < 1; )
    {
        foreach (var cat in Model.MyObject)
        {
            if (i == 0)
            {
                <li class="active"><a href="#@cat.Name" data-toggle="tab">@cat.Name</a></li>
                i++;
            }
            else
            {
                <li><a href="#@cat.Name" data-toggle="tab">@cat.Name</a></li>
            }
        }
    }

</ul>
<div class="tab-content" style="overflow: visible;">
    @for (int i = 0; i < 1; )
    {
        foreach (var cat in Model.Model.MyObject)
        {
            if (i == 0)
            {
                <div class="tab-pane active" id="#@cat.Name">@cat.Name</div>
                i++;
            }
            else
            {
                <div class="tab-pane" id="#@cat.Name">@cat.Name</div>
            }
        }
    }
</div>

各foreachループにブレークポイントを設定しました-渡されるコンテンツがあるので、問題はありません。

別のタブを選択したときにコンテンツが変更されるようにコードを変更するにはどうすればよいですか？

編集：最初の関数のみをアクティブにするIF関数を作成しました。現在のところ、タブは切り替えることができますが、コンテンツは切り替えません。最初のコンテンツのみが表示され、別のタブをクリックしても変更されません。

4

2 に答える 2

2

activeマークアップはありますが、クラスのロジックはありません。Bootstrapは、Javascriptを介してそのロジックを提供します。

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

ソース：http ：//twitter.github.com/bootstrap/javascript.html#tabs

于 2012-08-31T10:56:05.297 に答える
1

私はcakePHPで同様のことをしました。activeユーザーがページを読み込んだときにアクティブなタブが表示されるように、そのうちの1つを指定する必要があります。次に、別のタブをクリックすると、jsが起動し、activeクラスをそのタブに移動します。ifステートメントを挿入して、activeクラスを最初のタブ（またはデフォルトでアクティブにするタブ）にのみ追加するようにすることができます。

于 2012-08-31T12:26:07.383 に答える