MVC 5：jQuery 嵌套选项卡未正确显示

Question

注意：我是 jQuery 和标签的新手。

我正在尝试在 MVC 5 Web 应用程序中使用 jQuery 选项卡实现嵌套选项卡。出于某种原因，实施工作不正常，我假设存在基于网站行为的错误，我怀疑它与活动选项卡的设置方式有关。

当用户登录时，他们将被带到 MainAppTabs 的页面。顶部的两个选项卡是 Client 和 Account。 Client 选项卡具有嵌套选项卡 Client Info、Billing Selections 和 About，而 Account 选项卡目前只有一个嵌套选项卡 Account，应该只显示帐户列表。

在下面的当前实施中，“帐户”选项卡是第一个显示的选项卡，而不是 Client 选项卡，还有嵌套的 Account 选项卡。当我单击 Client 选项卡时，它将正常显示其嵌套选项卡。但是，当我再次单击 Account 选项卡时，页面会被清除，我必须刷新页面 (F5) 才能显示 Account 选项卡及其嵌套选项卡。此外，嵌套选项卡似乎显示了两次，它向右偏移并具有重复的边框，但嵌套选项卡边框和数据溢出到父选项卡边框之外。

<div id="MainAppTabs">
    <ul>
        <li>@Html.ActionLink("Client", "ClientTabs", "ClientSetup")</li>
        <li>@Html.ActionLink("Account", "AccountTabs", "AccountSetup")</li>
    </ul>
</div>

<script>
    $(function () {
        $("#MainAppTabs").tabs({ active: 1 });
    });
</script>

客户端选项卡：

<div id="ClientSetupTabs">
    <ul>
        <li>@Html.ActionLink("Client Info", "Edit", "ClientSetup")</li>
        <li>@Html.ActionLink("Billing Selections", "BillingSelections", "ClientSetup")</li>     
    </ul>
</div>

<script>
    $(function ()
    {
        $("#ClientSetupTabs").tabs({ active: 1 });
    });
</script>

帐户选项卡：

<div id="AccountSetupTabs">
    <ul>
        <li class="active">@Html.ActionLink("Accounts", "Index", "AccountSetup")</li>
    </ul>
</div>

<script>
    $(function ()
    {
        $("#AccountSetupTabs").tabs({ active: 1 });
    });
</script>

Answer 1

这似乎是嵌套选项卡的问题，可能是因为 ajax 调用的方式和部分中的脚本（脚本不应在部分中）。为此，您可以为每个选项卡的内容提供占位符元素，并让链接使用 id 属性引用这些元素。

html 会是

<div id="main"> // main (parent) tabs
  <ul>
    <li><a href="#client">Client</a></li>
    <li><a href="#account">Account</a></li>
  </ul>
  <div id="client"> // client tabs
    <ul>
      <li><a href="#client-info">Client Info</a></li>
      <li><a href="#billing-selections">Billing Selections</a></li>
    </ul>
    <div id="client-info">
      // content for client information
    </div>
    <div id="billing-selections">
      // content for billing selections
    </div>
  </div>
  <div id="account"> // account tabs
    <ul>
      <li><a href="#accounts">Accounts</a></li>
    </ul>
    <div id="accounts">
      // content for accounts
    </div>
  </div>
</div>

并初始化选项卡

$('#main').tabs({ ... }); // set options as required
$('#client').tabs({ ... });
$('#account').tabs({ ... });

要显示内容，如果视图中的模型包含需要生成部分的数据，请使用 @Html.Partial()，如果要调用 [=36= 的服务器方法，请使用 @Html.Action() 】偏。例如，如果 ClientSetupController returns 的 Edit() 方法显示在 Client Info 选项卡中的局部视图，则

<div id="client-info">
    @{ Html.RenderAction("Edit", "ClientSetup"); } // or @Html.Action("Edit", "ClientSetup")
</div>

控制器方法在哪里

[ChildActionOnly]
public PartialViewResult Edit
{
    var model = ... // initialize you model for the view
    return PartialView("_Edit", model);
}

和_Edit.cshtml是局部视图，包含您要在选项卡中显示的html

MVC 5：jQuery 嵌套选项卡未正确显示

MVC 5: jQuery nested tabs are not displaying properly

javascript

asp.net-mvc

jquery

jquery-plugins

jquery-ui-tabs