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()，如果要调用返回部分的服务器方法，请使用@Html.Action()。例如，如果ClientSetupController 的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