asp.net - 如何在我的 ASP.NET MVC 应用程序中使用 jQuery 选项卡进行导航？

Question

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

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

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

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

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

目前，当我调用 $("#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)。如果我重新安排它以便我有一个主页，并使用部分 View 从选项卡加载内容，那么我在地址栏中没有可用的 URL(上面的问题 #1)。

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

谢谢

Answer 1

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