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>

ClientTabs：

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

AccountTabs：

<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()。例如，如果Edit() ClientSetupController方法返回要在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嵌套选项卡无法正常显示

1 个答案: