2

我正在使用 ASP.NET MVC 创建一个新应用程序。

我想在我的窗口顶部使用一系列 jQuery 选项卡，以允许用户访问应用程序的各个模块。

我想将选项卡放在我的共享布局视图中，这样我就不会在整个应用程序中复制它们。

我遇到了两个相互矛盾的问题，我似乎无法找到一致的解决方案：

  1. 当我单击一个选项卡时，我希望整个窗口导航到该页面，而不是仅仅将内容加载到一个 div 中。我这样做是为了允许为特定模块添加书签。（我希望地址栏包含当前内容的 URL，而不仅仅是“主页”URL。）

  2. 目前，当我调用 $("#tabs").tabs(); jQuery 为我的每个选项卡创建一个 div，并尝试将我的 href 内容加载到 div 中。这最终会创建我所在页面的副本，并将其嵌套在其中。

这是我的选项卡定义（来自默认布局页面）：

   <section class="tabs">
        <div id="tabs">
            <ul>
                <li><a href="Home" rel="Home">Instructions</a></li>
                <li><a href="Questions" rel="Questionnaire">Questions</a></li>
                <li><a href="Submit" rel="SubmitAndConfirm">Finish</a></li>
                <li><a href="FAQ">FAQ</a></li>
            </ul>
        </div>
    </section>

这是我用来设置它们的脚本：

function SetupTabs(sel) {

    $("#tabs").tabs();

    $("#tabs").tabs("select", sel); // Selects the tab
    $('#tabs').tabs({
        select: function (event, ui) {
            location.href = ui.tab.rel;
        }
    });
}

这实际上使我的页面可以正确导航，但是将页面嵌套在它们自身中（上面的问题 #2）。如果我重新安排它以便我有一个主页，并使用部分视图从选项卡加载内容，那么我在地址栏中没有可用的 URL（上面的问题 #1）。

任何想法将不胜感激。我知道这不是 jQuery 选项卡的设计范例，但我们在应用程序的其他地方使用它们，并且我们使用了很多 jQuery UI 主题元素，所以我也想在这个元素上坚持使用它们，如果我能让它工作。

谢谢

4

1 回答 1

4

由于您希望每个选项卡单击都充当导航，因此您可能需要考虑不使用 JQueryUI 选项卡，而是使用<ul>样式看起来像带有单击事件设置的选项卡来导航到您想要的页面。

于 2012-04-25T18:42:18.270 回答