Question

我正在处理小型mvc应用程序，在我看来有标签控件有3个标签，根据ViewBag值，我需要打开我的第三个标签，这里是我的视图的外观图像：

因此，当加载View时，我需要检查ViewBag的值，并根据我需要打开我的TAB 3，所以这是我尝试过的：

<div class="" role="tabpanel" data-example-id="togglable-tabs">
    <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
            @if (ViewBag.SuccessBody == null)
            {
                <li role="presentation" class="active">
                    <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">TAB 1</a>
                </li>
                <li role="presentation" class="">
                    <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 2</a>
                </li>
                <li role="presentation" class="">
                    <a href="#tab_content3" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 3</a>
                </li>
            }
            else
            {
                <li role="presentation" class="">
                    <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">TAB 1</a>
                </li>
                <li role="presentation" class="">
                    <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 2</a>
                </li>
                <li role="presentation" class="active" onload="RedirectToTab();">
                    <a href="#tab_content3" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 3</a>
                </li>

            }
    </ul>

正如你可以看到人们依赖于一个值ViewBag.SuccessBody我试图加载相应的HTML，所以如果有一个值，那么我将加载包含TAB3的HTML来拥有class="active"（请阅读详细的代码）

但不幸的是，这种方法，TAB3变得活跃但不打开，所以它的内容不可见，它在TAB1上保持准确，而TAB3看起来像它是活跃的，这很糟糕：（。

所以我所做的是：

我编写了javasscript方法，该方法应该真正打开TAB3，但我不知道如何调用它，所以我想我可以在我的onload元素上使用li方法调用它，所以伙计们正如你在上面的代码中看到的那样，我在李

上写道

onload="RedirectToTab();"

但不幸的是没有任何事情发生..

这里是我的RedirectToTab javascript方法的定义：

function RedirectToTab() {
            var customVal = $("#editViewBag").val();
            if (customVal == 'True') {
                $('#myTab a[href="#tab_content3"]').tab('show');
            }
}

那么伙计，我怎么能打开TAB3取决于我的ViewBag的vaue？

谢谢你们干杯

Answer 1

只需使用剃刀引擎在javascript中输出您的ViewBag值：

function RedirectToTab() {
        var customVal = '@ViewBag.SuccessBody';
        if (customVal == 'True') {
            $('#myTab a[href="#tab_content3"]').tab('show');
        }
}

现在您可以从doc ready中调用它：

$(document).ready(function () {
    RedirectToTab();
});

Answer 2

您不需要使用JavaScript来打开标签页。您可以使用Razor视图，这样可以在页面加载时看不到活动标签从1到3的切换。这是一个包含3个选项卡的简单示例：

@{ 
    string tab1 = null, tab2 = null, tab3 = null;
    if (ViewBag.SuccessBody == null)
    {
        tab1 = "active";
    }
    else
    {
        tab3 = "active";
    }
}
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="@tab1"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation" class="@tab2"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
    <li role="presentation" class="@tab3"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane @tab1" id="tab1">
         tab 1
    </div>
    <div role="tabpanel" class="tab-pane @tab2" id="tab2">
        tab 2
    </div>
    <div role="tabpanel" class="tab-pane @tab3" id="tab3">
        tab 3
    </div>
</div>

如何根据ViewBag的值

2 个答案: