Asp.net mvc 4 如何在相应的选项卡中显示不同的视图？

无论我点击哪个标签，它都不会显示任何内容。我想在相应的选项卡中显示视图。我不知道在显示视图的

**此处**

之间放置什么（请参见下面的完整代码）

视图如下所示：

<ul id="tabs">
    <li>@Html.ActionLink("Random stuff", "TabbedIndex?claimed=false", "Stuff", null, new { name = "tab1" }) </li>
    <li>@Html.ActionLink("Special stuff", "TabbedIndex?claimed=true", "Stuff", null, new { name = "tab2" }) </li>
</ul>

<div id="content"> 
    <div id="tab1"></div>
    <div id="tab2"></div>
</div>

@ActionLink（“随机填充”，“TabbedIndex？claid=false”，“填充”，null，新的{name=“tab1”}）
@ActionLink（“特殊的东西”，“TabbedIndex？声明=true”，“东西”，null，新的{name=“tab2”}）

这是我的剧本：

<script>
    $(document).ready(function () {
        $("#content").find("[id^='tab']").hide(); // Hide all content
        $("#tabs li:first").attr("id", "current"); // Activate the first tab
        $("#content #tab1").fadeIn(); // Show first tab's content

        $('#tabs a').click(function (e) 
        {
            e.preventDefault();
            if ($(this).closest("li").attr("id") == "current") { //detection for current tab
                return;
            }
            else {
                $("#content").find("[id^='tab']").hide(); // Hide all content
                $("#tabs li").attr("id", ""); //Reset id's
                $(this).parent().attr("id", "current"); // Activate this
                $('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#内容”）.find（“[id^='tab']”）。hide（）；//隐藏所有内容
$（“#tabs li:first”）.attr（“id”，“current”）；//激活第一个选项卡
$（“#内容#选项卡1”）.fadeIn（）；//显示第一个选项卡的内容
$（“#选项卡a”）。单击（功能（e）
{
e、 预防默认值（）；
if（$（this）.lassest（“li”）.attr（“id”）==“current”）{//当前选项卡的检测
返回；
}
否则{
$（“#内容”）.find（“[id^='tab']”）。hide（）；//隐藏所有内容
$（“#tabs li”）.attr（“id”，”；//重置id的
$（this）.parent（）.attr（“id”，“current”）；//激活此
$（'#'+$（this.attr（'name'））.fadeIn（）；//显示当前选项卡的内容
}
});
});

假设加载时两个选项卡都隐藏，您可以尝试以下操作：

<script>
    $('#tabs a').click(function (e) 
            {
                e.preventDefault();
                var name = $(this).attr("name"), tab = $("#" + name);
                if (tab.is(":visible")) {
                    //if the tab is visible, do nothing
                    return;
                }
                else {
                    // show the selected tab and hide all the siblings/neighbours tabs
                    tab.show().siblings().hide();
                }
            });
</script>

$（“#选项卡a”）。单击（功能（e）
{
e、 预防默认值（）；
var name=$（this.attr（“name”），tab=$（“#”+name）；
如果（制表符为（“：可见”））{
//如果选项卡可见，则不执行任何操作
返回；
}
否则{
//显示所选选项卡并隐藏所有同级/相邻选项卡
tab.show（）.sides（）.hide（）；
}
});

这是解决方案，我没有更改原始代码和脚本中的任何内容：

<div id="content"> 
    <div id="tab1">@{ Html.RenderAction("TabbedIndex", "Stuff", new { claimed = false }); }</div>
    <div id="tab2">@{ Html.RenderAction("TabbedIndex", "Stuff", new { claimed = true }); }</div>
</div>

@{Html.RenderAction（“TabbedIndex”，“Stuff”，new{claided=false}）；}
@{Html.RenderAction（“TabbedIndex”，“Stuff”，new{claided=true}）；}

第一个选项卡是用户将看到的。无论如何，它的工作原理应该是一样的。您将在Ready函数中隐藏第二次。此代码将检查选项卡是否可见，如果可见，则不执行任何操作，否则显示它并隐藏同级。