Question

点击哪个标签无关紧要，它没有显示任何内容。我想在相应的选项卡中显示View。我不知道在<div id="tab...">**HERE**</div>之间放置什么来显示视图（参见下面的完整代码）

View看起来像这样：

<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>

这是我的剧本：

<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>

Answer 1

假设两个标签在加载时都隐藏了，您可以试试这个：

<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>

Answer 2

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

<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>

如何在相应的选项卡中显示不同的视图？

2 个答案: