Question

我正在开发一个MVC3 Web应用程序，我需要创建一个类似于SalesForce的tab驱动布局的布局。我尝试创建局部视图以在我的标签内容区域中呈现侧边栏导航。 CSS定位不起作用，因为我需要保留在标签的内容区域内。我应该如何正确呈现我的内部导航菜单和我的内容，并保持在选项卡式内容区域内。我尝试发布salesforce的屏幕截图，但该网站的新用户无法加载图片。

<div id="tabs">
<ul>
    "#tabs-1">Project
    #tabs-2">Metrics
     href="#tabs-3">Task
</ul>
<div id="tabs-1">   
             @Html.Partial("_SideBar")

</div>
<div id="tabs-2">
    <p>Content for TAB2</p>
</div>
<div id="tabs-3">
    <p>Content for TAB3.</p>
</div>

好吧，我遇到的问题是我试图在我的_Layout页面中使用JqueryUI TAB小部件。我试图嵌入一个2列布局，第一列中有侧栏导航，第二列中有内容。这必须显示在TAB视图区域的墙内。因此，如果我单击TAB1，您可以看到第1列中的导航和第2列中的内容。如果我然后单击TAB 2，我仍希望左侧有导航，右侧有内容但是他们会有其中的数据不同。最大的问题是如何确保TAB视图区域中的这些列保留在TAB的视图区域中，而不是完全呈现在TAB旁边。我希望这很清楚。如果我需要提供更多信息，请告诉我。感谢

Answer 1

很难在这里完全得到你想要的东西，但你只是想在你的布局中使用区域吗？例如

<div id="tabs-2">
     @RenderSection("Tab2Content", required: false)
</div>

并在您的观点中：

@section Tab2Content{
content here
}

Answer 2

我被JQuery Tab组件误导了。浮动属性导致选项卡不扩展，使得看起来在div标签内没有任何重新生成。只需从外部标记中删除float属性

带选项卡和页面布局的MVC3

2 个答案: